How to Optimize Split Chunks Plugin with Aurelia

Help Requests
1

How can I optimize the split chunks plugin with aurelia using Webpack 4? This is using the default webpack chunk splitting. My main bundle is around 8mb and should only load kendo on the specific urls. It seems like be default all the node_modules are loaded at once.

Screenshot%20at%20Jul%2009%2011-39-56
Screenshot at Jul 09 11-39-56.png2350Ă—1770 703 KB

1 Like
2

the aurelia cli webpack default has two chunks, so i assume you’re not using that. so maybe have a look there

3

It has two chunks because it has two entry points, but it does not show a proper example of code splitting using the split chunks plugin to optimize a large code base.

4

Are you managing the splitting via the route config?? Meaning, are you assigning the optional additional parameter, e.g moduleId: PLATFORM.moduleName('path/to/viewmodel/my-view', 'unique-chunk-name') in each of your routes? If not, this is one way you optimize your chunks in the app. The other is to turn on various build features in your webpack settings such as …

plugins: [
    new UglifyJSPlugin(),
    new CompressionPlugin ({
        algorithm: 'gzip'
    })
]

One of my apps has semi complicated to complicated views, 18 in total. Without the above compression, the main file is about 8.5mb (407kb of chunked files). Using the above compression, it’s down to 3.2mb (394kb of chunked files) and gziped at 785kb file (108kb of chuncked files).

5

@rkever, I just added in the compression plugin which does seem to help with the speed, but it still doesn’t help with properly dynamically loading key resources. For example, in my image above, you’ll notice Kendo UI is loaded in the main bundle, but in my app, it’s imported only in a few routes. I do not want it loaded in the main bundle. The node_module import resources should be loaded as they are needed. For some reason this is not happening in Aurelia. I’m not sure if this is because of the way aurelia is architected or if this is because something in my webpack config needs changing. And yes, I am using moduleID to chunk my routes.

Have any more thoughts on this?

6

Do you have any Kendo UI elements used inside any global resources/components? If so, loads all your global resources/components in the main.js. Or perhaps you have a Kendo UI element used somewhere in your frame, such as somewhere in the app main template?

7

If your users will most likely end up using any view with a kendo UI element anyways I’m thinking it may not matter since they’ll need that library loaded at some point anyways.

8

Also, keep in mind you probably don’t want to use the compression when running local since it takes longer to compile the files with browsersync. Just add them to your environment specific build files, if you haven’t already done that :slight_smile:

9

You’re right, but it’s most likely not going to happen so I want to lazy load that. 2 out of the 20+ page app has kendo and it’s only used on non-high traffic pages for reporting.

10

good call on only using it for environment builds :slight_smile:

11

Do you have it on any global resources/components config.globalResources([])?? Or used inside your app.html??

12

Nope, it’s not used globally anywhere. It’s only in the view-model and view of the page specific files. But you can see from above the for the most part, all of the node_modules and big files are placed into a large file chunk which doesn’t make any sense.

13

Have a look at the below link. I think you might want to look into CommonsChunkPlugin. I haven’t really run into this issue since virtually all my UI 3rd party libs are used within resource components and are used everywhere so in my case, I want it loaded at first load since my users will be using at least one of the elements in our library. The below link has an example in the webpack config on how to set this up. Let me know if that helps.

https://github.com/webpack/webpack/issues/1807#issuecomment-206711812 and webpacks docs page https://webpack.js.org/plugins/commons-chunk-plugin/

14

@rkever CommonChunks is old school and is out of date. SplitChunks is what is used now in Webpack 4 but still… how do I configure this thing to do what I want? For me, I think it’s crazy to load all these resources that may never be used.

https://webpack.js.org/plugins/split-chunks-plugin/

15

Ah…right. Sorry about that. It would be close to the same with splithchunks but I think it may be something else?? Honestly it’s hard to say really as I can’t see the code base. You might try this article though, they outline exactly what you are trying to accomplish. https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec60140ec5a

16

I had reviewed this earlier today, but still the kendo code is not defined as a module so I get an error doing the dynamic import functions.

also, this plugin doesn’t exist for Aurelia

const GenerateTags = Loadable({
  loader: () =>
    import(/* webpackChunkName: "generateTags" */ "./GenerateTags"),
    loading: LoadingSpinner
});
17

@sunburnol, I’m sorry, not sure what else to try. As I mentioned before it’s hard to pinpoint without seeing the actual code.