Even if you have tried to configure your webpack to reduce the size of your app to the lowest possible level, tracking is important to keep track of what is contained within your application. Because it is possible that when you install a dependency and it increases the size of the application and of course you do not know that.
This article will guide some tools to help you better understand the bundle of the app.
Keep track of the bundle size
To track the size (size) of the app you can use webpack-dashboard during development and bundlesize on CI.
webpack-dashboard
Webpack-dashboard improves the output on the webpack console with the capacity of dependencies, progress, and more. This is its interface.
This dasshboard is very useful for tracking large dependencies, and if you add a new package you will immediately see it in the modules section.
How to integrate?
- Setting
1 2 3 4 | npm install webpack-dashboard --save-dev # or using yarn yarn add webpack-dashboard -D |
- Import into webpack config file, for example with vue app
build/webpack.dev.conf.js
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> DashboardPlugin <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'webpack-dashboard/plugin'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ...</span> module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">DashboardPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// ...</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
- Modify the server script
1 2 3 4 5 6 | "scripts": { <span class="token deleted">-- "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",</span> <span class="token inserted">++ "dev": "webpack-dashboard -- webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",</span> "lint": "eslint --ext .js,.vue src" } |
More details about the installation and usage can be found at the package github. https://github.com/FormidableLabs/webpack-dashboard
So every time you launch the application in a dev environment you will see this dashboard console screen to easily monitor the size of the modules.
Bundlesize
Bundlesize confirms that the webpack’s assets do not exceed the allowed size. You can integrate it into a specific CI to receive notifications when your app is bloated.
Steps to install:
Find out the maximum sizes
- Optimize the app so that it reaches the lowest possible capacity and run the build production.
- Add
bundlesize
topackage.json
1 2 3 4 5 6 7 8 | <span class="token punctuation">{</span> <span class="token property">"bundlesize"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"path"</span> <span class="token operator">:</span> <span class="token string">"./dist/*"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- Run
bundlesize
withnpx
.
1 2 | npx bundlesize |
It will print out the size of each file after gzip
:
1 2 3 4 5 | PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB |
- Add 10-20% of space to each file to find maximum sizes. This 10-20% difference will allow you to work freely during the application development process, and warn when the size increases too large.
Enable bundlesize
- Install
bundlesize
package.
1 2 3 4 | npm install bundlesize --save-dev # or using yarn yarn add bundlesize --D |
- Update
bundlesize
inpackage.json
, adding constraints on maximum sizes.
For some files (eg images), you may need to specify the maximum size of each type instead of each file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token punctuation">{</span> <span class="token property">"bundlesize"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"path"</span> <span class="token operator">:</span> <span class="token string">"./dist/*.png"</span> <span class="token punctuation">,</span> <span class="token property">"maxSize"</span> <span class="token operator">:</span> <span class="token string">"16 kB"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"path"</span> <span class="token operator">:</span> <span class="token string">"./dist/main.*.js"</span> <span class="token punctuation">,</span> <span class="token property">"maxSize"</span> <span class="token operator">:</span> <span class="token string">"20 kB"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"path"</span> <span class="token operator">:</span> <span class="token string">"./dist/vendor.*.js"</span> <span class="token punctuation">,</span> <span class="token property">"maxSize"</span> <span class="token operator">:</span> <span class="token string">"35 kB"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
- Add
npm
script to run the check command.
1 2 3 4 5 6 | <span class="token punctuation">{</span> <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"check-size"</span> <span class="token operator">:</span> <span class="token string">"bundlesize"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- Reconfigure your CI so that it runs
npm run check-size
every time you push.
Read more: Alex Russell – Can You Afford It ?: Real-world Web Performance Budgets
Analyze why bundle is so heavy
You may want to dive deeper into the bundle to find out which modules are taking up a lot of space, so please recommend webpack-bundle-analyzer .
(Photo: https://github.com/webpack-contrib/webpack-bundle-analyzer )
The webpack-bundle-analyzer scans the entire bundle and builds a virtual map showing what is inside it. Using that virtual map you can easily see large or unnecessary dependencies.
To use it, first install the webpack-bundle-analyzer
package:
1 2 3 4 | npm install webpack-bundle-analyzer --save-dev # or using yarn yarn add webpack-bundle-analyzer -D |
Add plugin to webpack config.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> BundleAnalyzerPlugin <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'webpack-bundle-analyzer'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> BundleAnalyzerPlugin <span class="token punctuation">;</span> module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">BundleAnalyzerPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// ...</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Then run build production, the plugin will automatically open the statistics screen on a browser tab. By default, the statistics show the size of the files that have been parsed (the files inside the bundle). Use the left sidebar to switch between files and compare sizes.
Here are the sections you need to keep an eye on within statistics:
- Large dependencies . Why are they so big? Is there anything smaller and lighter to replace? Did you import the whole library? (for example
moment.js
in the image above, almost only use a few locales but import all, if removed will reduce quite a bit of space. - Duplicated dependencies . Notice if there’s a file with the same library name? Use the
optimization.splitChunks.chunks
option (webpack 4) orCommonsChunkPlugin
(webpack 3) to move it to a common file. Or the same library but there are many versions of the library? - Similar dependencies . See if there are similar libraries with similar functions, you can choose to remove only one library (for example,
moment
anddate-fns
, orlodash
andlodash-es
).
Read more: Sean Larkin – webpack bits: Getting the most out of the CommonsChunkPlugin ()
summary
- Use
webpack-dashboard
andbundlesize
to always keepbundlesize
app is growing. - Dig deep into the build by viewing the size of the modules with
webpack-bundle-analyzer
Combs from https://developers.google.com .