AU1 Webpack 5 Adding all chunks to index.html

1

We are using Aurelia 1 and Webpack 5. We upgraded from Webpack 4. We noticed that our index.html file now includes a script tag for every single javascript file produced by the splitChunks plugin. This is about 150 javascript files. At some point in the past only a single js file was included and everything was lazy loaded when it was needed. However, now it’s just adding everything. I’m not sure when this happened, however, I believe it was when we upgraded to Webpack 5.

Our relevant webpack.config.js settings are:

entry: {
    app: ['aurelia-bootstrapper']
},

optimization: {
    runtimeChunk: true,  // separates the runtime chunk, required for long term cacheability
    minimize: production,
    minimizer: [
        new TerserPlugin({
            //cache: true,
            parallel: true,
            terserOptions: {
                //ecma: platform === 'es6' ? 2015 : 5
                ecma: 2018
            }
        }),
        new CssMinimizerPlugin()
    ],
    splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 500000,
        minRemainingSize: 0,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
    }
},

    new HtmlWebpackPlugin({
        template: 'index.ejs',
        minify: production ? {
            removeComments: true,
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: false,
            minifyCSS: true,
            minifyJS: true,
            removeScriptTypeAttributes: false,
            removeStyleLinkTypeAttributes: true,
            ignoreCustomFragments: [/\${.*?}/g]
        } : undefined,
        chunksSortMode: 'none',
    }),
1 Like
2

Just a wild guess, what if you change your config from chunks: 'all' to chunks: 'async'?

3

It ended up being related to removing the chunk name from calls to PLATFORM.moduleName(). This brings up the question of how will lazy loading in v2 be handled? v2 doesn’t have a PAL to help with this. Will lazy loading be handled in webpack.config.js only?

4

This can be done by the “magic comments” feature of webpack:

import { route } from '@aurelia/router'; 

@route({
    routes: [
      {
        path: ['products'],
        component: () => import(/* webpackChunkName: "products-lazy" */ './components/products'),
        title: 'Lazy entry point for products section',
      }
    ]
})
export class Products
{
}
3 Likes