Reducing Webpack compiled asset file sizes

Why are my final javascript files so big?

After a bit of work, I've figured out how to get statistics from webpack, so I can see exactly which packages are included in vendor.js, and which in app.js, and tune them appropriately. I thought I'd share what I found, and see if anyone has better tools or techniques for this.

In package.json, I included a new script, and some new dependencies:

"scripts": {
    "detail": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --display-modules",
"devDependencies": {
    "webpack-bundle-analyzer": "^2.3.1"

I copied webpack.config.js to my project root folder, and added these lines:

var yargs  = require("yargs");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

var argv = yargs
    .boolean('display-modules')
    .argv

// ... (other under plugins)

if (argv.displayModules) {
    module.exports.plugins.push(
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            reportFilename: '../storage/app/public/report.html',
            generateStatsFile: true,
            statsFilename: '../storage/app/public/stats.json',
        })
    );
}

Now, when I run npm run detail, two new files are created, and report.html is automatically loaded in the browser. This file gives me a picture of how big each of the packages in each of my bundles are, and what is loaded into each bundle. In my case, I found that core.js was coming into my app bundle; moving it to the vendor bundle reduced my app.js by about 95KB.

The stats.json file can be usedwith a variety of tools to analyze the data. There's a big list at https://survivejs.com/webpack/optimizing/analyzing-build-statistics/. In my case, I found out that I have ONE plug in that uses jquery. I'm now figuring out how to remove that dependency. :-)

I also found that I'm not using lodash at all, and simply removing it reduces 93KB from my vendor file.

Using these tools, I've managed to reduce my app.js file to around 42KB (which will be growing a lot in the near future).