You start a new project using magic tools like
yo, a built-in CLI (e.g.
omg-new-framework-cli) or just a template from GitHub. Most of them have a webpack inside because this is a fancy module bundler nowadays. But what exactly is inside of built bundle?
Before we start optimization we need to run plain
webpack. In most templates, it is hidden behind
gulp or native command. Running it manually is simple:
but I’m sure that you will end with an error like:
1 2 3 No configuration file found and no output filename configured via CLI option. A configuration file could be named 'webpack.config.js' in the current directory. Use --help to display the CLI options.
So instead we should run (replace
./conf/webpack-dist.conf.js with proper path)
1 ./node_modules/.bin/webpack --config ./conf/webpack-dist.conf.js
This will give a nice output with all files listed, but it isn’t readable enough.
Like always we need another NPM. For example a Webpack Bundle Size Analyzer. After install we can run:
1 ./node_modules/.bin/webpack --config ./conf/webpack-dist.conf.js --json | webpack-bundle-size-analyzer.cmd
And receive a simple plain result where
<self> is your code
1 2 3 4 5 6 7 8 9 xxx: 169.66 KB (44.7%) xxx-validate: 81.14 KB (21.4%) xxx-router: 54.8 KB (14.5%) xxx-resource: 34.22 KB (9.03%) style-loader: 6.74 KB (1.78%) css-loader: 1.42 KB (0.375%) xxx-loader: 1.12 KB (0.295%) webpack: 509 B (0.131%) <self>: 29.56 KB (7.80%)