Assumptions

Webpack Experience
Webpack Version 4

Case Study


webpack --mode=production
webpack --mode=development

Asset    Size            Chunks        Chunk Names
[image]  245 bytes       [emitted]
[image]  575 bytes       [emitted]
...
app.css  33.8KiB       0 [emitted]           app
app.js   2.19MiB       0 [emitted]     [big] app

Split up webpack configuration

webpack.common.js
webpack.dev.js
webpack.prod.js

const merge = require('webpack-merge');
const common = require('webpack.common');

module.exports = merge(common, {
    ...
});

Production Performance

Source Maps

devtool: 'eval-source-map',

devtool: 'cheap-module-source-map',


Asset      Size            Chunks        Chunk Names

[image]    245 bytes       [emitted]
[image]    575 bytes       [emitted]
...
app.css    33.8KiB       0 [emitted]           app
app.js     428KiB        0 [emitted]     [big] app
app.js.map 652KiB        0 [emitted]           app

2.19MiB -> 428KiB

1.85MiB

ModuleConcatenationPlugin()


    import App from './App';

.babelrc

{
    "presets": ["env", {
        "targets": {
            ...
        },        "modules": false    }]
}


Asset      Size            Chunks        Chunk Names

[image]    245 bytes       [emitted]
[image]    575 bytes       [emitted]
...
app.css    33.8KiB       0 [emitted]           app
app.js     373KiB        0 [emitted]     [big] app
app.js.map 250KiB        0 [emitted]           app

2.19MiB -> 428 KiB -> 373KiB

55KiB (1.91MiB)

Code splitting for better caching

373KiB


module.exports = merge(common, {
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    name: 'vendor',
                    chunks: 'initial',
                    enforce: true,
                },
            },
        },
    },
});


Asset         Size            Chunks       Chunk Names

[image]       245 bytes       [emitted]
[image]       575 bytes       [emitted]
...
app.css       33.8KiB       0 [emitted]          app
vendor.js     346KiB        0 [emitted]    [big] vendorvendor.js.map 5.32 KiB      1 [emitted]          vendor
app.js        31.6 KiB      0 [emitted]          appapp.js.map    150KiB        0 [emitted]          app

Application code 31.6KiB

Enabling caching with Deterministic Hashing


output: {
    filename: '[name].[chunkhash].js',
},

Visualizing dependencies


yarn add webpack-visualizer-plugin -D


const Visualizer = require('webpack-visualizer-plugin');
...

module.exports = merge(common, {
    ...

    plugins: [
        new Visualizer(),
        ...
    ],
}

The default view of the webpack visualizer plugin

The webpack visualizer plugin showing lodash taking a shit load of space


import _ from 'lodash';


import forEach from 'lodash/forEach';

The webpack visualizer plugin showing a much smaller lodash


Asset         Size            Chunks        Chunk Names

[image]       245 bytes       [emitted]
[image]       575 bytes       [emitted]
...
app.css       33.8KiB       0 [emitted]           app
vendor.js     277KiB        0 [emitted]     [big] vendor
app.js        31.6 KiB      0 [emitted]           app
vendor.js.map 5.32 KiB      1 [emitted]           vendor
app.js.map    105KiB        0 [emitted]           app

2.19MiB -> 428 KiB -> 373KiB -> 277KiB

98KiB (2.01MiB)

mode
Webpack configuration splitting
Source Maps
ModuleConcatenationPlugin
Code splitting
Deterministic Hashing
Visualizing dependencies

Questions?