# How to Optimize Split Chunks Plugin with Aurelia

**URL:** <https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409>\
**Category:** Help Requests\
**Created:** [July 9, 2018, 3:42pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409 "2018-07-09T15:42:52Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 9, 2018, 3:42pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/1 "2018-07-09T15:42:52Z")

</div>

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/d38ef90726d03b8403adfe5b45172e67b9c1c2fe.png)

---

<div class="post-metadata">

**Author:** ![doktordirk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/doktordirk/32/807_2.png) [@doktordirk](https://discourse.aurelia.io/u/doktordirk)\
**Post date:** [July 9, 2018, 4:15pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/2 "2018-07-09T16:15:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 9, 2018, 5:12pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/3 "2018-07-09T17:12:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 11, 2018, 8:53pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/4 "2018-07-11T20:53:39Z")

</div>

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 …

```auto
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).

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 5:17pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/5 "2018-07-12T17:17:39Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 5:35pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/6 "2018-07-12T17:35:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 5:36pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/7 "2018-07-12T17:36:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 5:37pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/8 "2018-07-12T17:37:31Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 5:38pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/9 "2018-07-12T17:38:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 5:38pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/10 "2018-07-12T17:38:43Z")

</div>

good call on only using it for environment builds 🙂

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 5:40pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/11 "2018-07-12T17:40:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 5:42pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/12 "2018-07-12T17:42:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 5:50pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/13 "2018-07-12T17:50:39Z")

</div>

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](https://github.com/webpack/webpack/issues/1807#issuecomment-206711812) and webpacks docs page [https://webpack.js.org/plugins/commons-chunk-plugin/](https://webpack.js.org/plugins/commons-chunk-plugin/)

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 5:59pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/14 "2018-07-12T17:59:16Z")

</div>

@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/](https://webpack.js.org/plugins/split-chunks-plugin/)

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 12, 2018, 6:13pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/15 "2018-07-12T18:13:22Z")

</div>

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](https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec60140ec5a)

---

<div class="post-metadata">

**Author:** ![sunburnol](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@sunburnol](https://discourse.aurelia.io/u/sunburnol)\
**Post date:** [July 12, 2018, 6:27pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/16 "2018-07-12T18:27:56Z")

</div>

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
});
```

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [July 13, 2018, 4:37pm UTC](https://discourse.aurelia.io/t/how-to-optimize-split-chunks-plugin-with-aurelia/1409/17 "2018-07-13T16:37:00Z")

</div>

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