I’m trying to use dynamic imports for my app to reduce the client bundle size, as currently the execution takes longer than I’d like on mobile devices.
My app is built using the pre-1.3 style, without using an imports directory. Will I need to move all of my client side code to the imports directory to take advantage of dynamic imports?
Currently, all the atmosphere packages I’ve added get included in the client bundle. Do they only get included in the client bundle if I explicitly import them when using the imports directory?
At the moment, the only way to avoid eager loading of code is by using the imports/ folder. So, in a nutshell, you should as a minimum, move all the code you want to dynamically import into imports/.
Most atmosphere packages do not support dynamic importing - those will always be eagerly loaded. For more infomation, take a look at this issue.
You could git clone the packages into a local packages directory and make the changes to the various package.js files. Then, export METEOR_PACKAGE_DIRS=your-local-package-dir and build with the updated packages.
Or you can just make local packages directory in the project, make the changes and bump the version. While at it you can also submit a PR to the original package.
Then when you do meteor update and meteor list you should see which packages are build from local sources.
For my use case, since I’ve got only one Meteor app, I can use my apps packages directory without issues. I wasn’t expecting the conversion to be too simple, I’ll check if it works for the packages I’m using. Thanks for the help!
it just logs "{"default":{}}" to the console. What did I do wrong?
And while we’re at it, how would I go about lazy loading dependencies too? I’m trying to create a dynamically importable package for Medium Editor, and a plugin for it has heavy dependencies that I’d like to dynamically import as well.
It seems only the file defined as api.mainModule gets loaded when I do the above import, api.addFiles files are ignored according to the websocket frames.
EDIT:
I assume this is because it expects an export. When I do do that, I get an unexpected token export error message in the browser console. Workaround by attaching the object to window from the dynamically imported file works.