## Webpack bundling and chunking The default in Webpack config is to put all the Javascript into a large bundle JS file. However this does not work well for many reasons. In my single page app, I use a lot of Javascript libraries which when put together form a very large source bundle file. 95% of the time, I will not be touching or changing any of these libraries. So here is my wishlist that comes from my C/C++ days. ## Wishlist - It must work with [hjs-webpack](https://github.com/henrikjoreteg/hjs-webpack) which in the author's words __" is just a simplified, opinionated way to configure webpack for development and then build for production. That also supports easily generating more files.." - Bundle together my Javascript into a separate bundle, and keep all the node_modules in a separate vendor bundle. - When library files are not changed the generated vendor bundle should keep the same filename (to optimize CDN caching). So ensure Webpack generates the same filename when library files are not changed. - Generate source-maps to enable easier debugging of my React apps. ## Analyzing your webpack Run `webpack --profile --json > stats.json` to generate the stats.json file. Fire up the [Webpack Analyzer](http://webpack.github.io/analyse/#home) and upload the stats.json. The analyzer provides a nice overview (and details) of the bundles, chunks and modules in your webpack. Read more at [their documentation site](https://github.com/webpack/docs/wiki/build-performance). ## Dynamic Vendor bundling [Jeremy Gayyed posted a blog about Dynamic vendor bundling](https://jeremygayed.com/dynamic-vendor-bundling-in-webpack-528993e48aab). It discussed the steps to configure Dynamic vendor bundling for webpack. I recommend reading this blog for a good understanding of the concepts of bundles, chunks and using CommonChunkPlugin. I've taken some of his ideas and adapted them for hjs-webpack . ### Install node modules ```sh npm install --save-dev webpack-md5-hash npm install --save-dev assets-webpack-plugin ``` ### Update your webpack.config.js with the following.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // hjs-webpack will generate 5 script files that you must include in your HTML. The map files are needed only when debugging. | |
| // main-[hash].js and main-[hash].js.map | |
| // vendor-[hash].js and vendor-[hash].js.map | |
| // manifest.js | |
| // | |
| // index.html - generated HTML that is your starting page and has script tags for all the above. It conditionally includes the map files if context.isDev==true. | |
| // context.json - This is a dump of the variable that is passed to the generation function by hjs-webpack excluding the source/modules details. | |
| // webpack-assets.json | |
| // replacer_filter - exclude source and modules when JSON stringifying the context. | |
| function replacer_filter(key,value) { | |
| if (key==='source') return undefined; | |
| if (key==='modules') return undefined; | |
| return value; | |
| } | |
| // Call hjs-webpack which creates the default webpack config. | |
| // Add devtool: 'source-map' if you want to enable source maps. See the hjs-webpack docs on this option. | |
| var config = getConfig({ | |
| isDev: isDev, | |
| devtool: 'source-map', | |
| in: join(src, 'app.js'), | |
| out: dest, | |
| devServer: { | |
| hostname: "0.0.0.0", | |
| port: "4000" | |
| }, | |
| html: function (context) { | |
| return { | |
| 'context.json': [ | |
| JSON.stringify(context,replacer_filter,2) | |
| ].join(''), | |
| 'index.html': [ | |
| '<!doctype html>', | |
| '<html>', | |
| '<head>', | |
| '<meta charset="utf-8"/>', | |
| '<title>React User Interface</title>', | |
| '</head>', | |
| '<body>', | |
| '<div id="root"></div>', | |
| '<script src="/'+context.manifest+'" type="text/javascript"></script>', | |
| '<script src="/'+context.vendor+'"></script>', | |
| context.isDev?'<script defer src="/'+context.vendor+'.map"></script>':'', | |
| '<script src="/'+context.main+'"></script>', | |
| context.isDev?'<script defer src="/'+context.main+'.map"></script>':'', | |
| '</body>', | |
| '</html>' | |
| ].join('\n') | |
| } | |
| } | |
| }); | |
| // Dynamic chunking and generate a manifest file. | |
| const WebpackMd5Hash = require('webpack-md5-hash'); | |
| const AssetsPlugin = require('assets-webpack-plugin'); | |
| config.plugins = [ | |
| // This will put any resource that is in the node_modules directory in the vendor bundle. | |
| new webpack.optimize.CommonsChunkPlugin({ | |
| name: 'vendor', | |
| minChunks: ({ resource }) => /node_modules/.test(resource), | |
| }), | |
| // Generate a 'manifest' chunk to be inlined in the HTML template | |
| new webpack.optimize.CommonsChunkPlugin('manifest','manifest.js'), | |
| // Need this plugin for deterministic hashing | |
| // until this issue is resolved: https://github.com/webpack/webpack/issues/1315 | |
| // for more info: https://webpack.js.org/how-to/cache/ | |
| new WebpackMd5Hash(), | |
| // Creates a 'webpack-assets.json' file with all of the | |
| // generated chunk names so you can reference them | |
| new AssetsPlugin() | |
| ].concat(config.plugins); | |
| config.output.filename='[name]-[chunkhash].js'; | |
| config.output.chunkFilename='[name]-[chunkhash].js'; | |
| config.output.devtoolLineToLine=true; | |
| config.output.pathinfo=true; | |
#### Some explanation required.
## Selecting modules that are in vendor bundle
```javascript
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => /node_modules/.test(resource),
}),
```
The .test will check if the resource is in the node_modules directory. Jeremy found [this comment](https://github.com/webpack/webpack/issues/2372#issuecomment-213149173) by Tobias Kopper (author of webpack). This is a better way than creating a list of modules that you must constantly maintain. Since you can write any logic, it is really powerful!
## Generate a consistent bundle filename in Webpack
Webpack will generate a new random filename each time you build the code. The main things that changes is the module import logic, so we split this off into a separate manifest file. The **webpack-md5-hash** will generate a deterministic hash which ensures the same hash if no content was changed. The following lines ensure the hash is used in the filename.
```javascript
config.output.filename='[name]-[chunkhash].js';
config.output.chunkFilename='[name]-[chunkhash].js';
```
## Source maps
To debug a packed file, you'll need a source map. The **devtool (optional, string, default='cheap-module-eval-source-map')** is a webpack developer tool to enhance debugging. [See the webpack docs for more options](https://webpack.github.io/docs/configuration.html#devtool).
I've chosen `source-map` which is the largest option. Ensure that you have the following lines in your config for source maps.
```javascript
devtool: 'source-map',
```
and
```javascript
config.output.devtoolLineToLine=true;
```
No comments :
Post a Comment