Menu
LazyLoading chunkName is not being displayed
const webpack = require('webpack');
const path = require('path');
var PROD = JSON.parse(process.env.PROD_ENV || '0');
module.exports = {
entry: {
clientApp: "./App/Modules/main",
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].bundle.js",
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/',
},
resolve: {
extensions: ['.js']
},
module: {
loaders: [
'angular-router-loader'
]
},
plugins: [
]
}
{
path: 'about',
loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)
}
It is not displaying module name for the chunk. what am i doing wrong here?
240
What we’re going to look at in this article is lazy loading in Angular, but in specific about the “common chunk” and the “commonChunk” option in the Angular builder configuration. The easiest way of applying lazy loading is to use the Angular Router’s built-in functionality.
Let’s talk about code splitting in Angular, lazy-loading and a sprinkle of Webpack. Code splitting allows us to essentially break our codebase down into smaller chunks and serve those chunks on demand, which we call “lazy loading”. So, let’s learn how to do it and some of the concepts/terminology behind it. Want the code?
This is where “on demand” comes into play. Lazy loading is the process in taking already “code split” chunks of our application, and simply loading them on demand. With Angular, the router is what allows us to lazy load. We call it “lazy” because it’s not “eagerly” loading - which would mean loading assets upfront.
Let's take the example from Code Splitting and tweak it a bit to demonstrate this concept even more. The code there does cause a separate chunk, lodash.bundle.js, to be generated and technically "lazy-loads" it as soon as the script is run.
The way that Angular named the chunks with the old string based loadChildren attribute was with a custom Angular webpack plugin similar to this one. The way that named code spliting chunks is done with straight webpack is with "Magic Comments" specifically the webpackChunkName comment - when I test this, it works for my development build, but as soon as I switch to a production build, it goes away and I am back to enumerated JavaScript files. Here is what my import looked like:
{
path: 'account',
loadChildren: () => import(/* webpackChunkName: "account" */ './account/account.module')
.then((m) => m.AccountModule)
}
When this was done, my chunk gets the name account.js when built for dev, but when built for production, it is still 1.js. I don't know the exact reason that the production build differs, maybe a conflict with another webpack plugin, maybe it is related to AOT, it is hard to know for sure.
I do not think that Google/Angular will publish a webpack plugin because this problem is 1.) not really blocking development (we can just rely on source maps), 2.) simply low priority. Writing a plugin for this means supporting even more code. Here is a bug report where they state as much: https://github.com/angular/angular-cli/issues/16697 named chunks with magic comments is not something they test for, so it will likely not work.
While the string method of async loading children of a route is deprecated, it still works and we can still use it to name chunks.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
