webpack调优总结

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

webpack 的出现为前端开发带来翻天覆地的变化，无论你是用 React，Vue 还是 Angular，webpack 都是主流的构建工具。我们每天都跟它打交道，但却很少主动去了解它，就像写字楼里的礼仪小姐姐，既熟悉又陌生。随着项目复杂度的上升，打包构建的时间会越来越长。终于有一天，你发现npm run dev后，去泡个茶，上了个厕所，跟同事 bb 一轮后回到座位，项目还没构建完的时候，你就会下定决心好好了解下这个熟悉的陌生人。

这次优化的目标主要有两个：

• 加快编译构建速度
• 减少页面加载的时间

现状是每次开发模式构建，大概要花 120 秒；生产模式构建，大概要花 300 秒。项目总共有将近 150 个 chunk。

如果你对 webpack 的工作原理感兴趣，可以看看我写的另一篇文章webpack启动代码源码解读

二、加快编译构建速度

有 2 种方式可以加快编译的速度，分别是减少每次打包的文件数目，和并行的去执行打包任务。这里用到了 2 个 webpack 插件：

• DllPlugin（减少每次打包的文件数目）
• HappyPack（并行的去执行打包任务）

下面对这两个插件作详细的介绍。

• DllPlugin

dll 是 Dynamic Link Library（动态链接库）的缩写，是 Windows 系统共享函数库的一种方式。将一些比较少改变的库和工具，比如 React、React-DOM，事先独立打包成一个 chunk，以后每次构建的时候再直接导入，就不用每次都对这些文件打包了。这里有 2 个分解动作：

• 独立打包 dll
• 导入 dll

使用 DllPlugin 可以独立打包 dll，具体的配置如下：

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const env = process.env.NODE_ENV;

module.exports = {

    entry: {
        vendor: ['react', 'react-dom', 'react-router', 'redux', 'react-redux', 'redux-thunk'],
    },

    output: {
        filename: '[name]_dll_[chunkhash].js',
        path: path.resolve(__dirname, 'dll'),
        library: '_dll_[name]',
    },

    resolve: {
        mainFields: ['jsnext:main', 'browser', 'main'],
    },

    plugins: [
        new webpack.DllPlugin({
            name: '_dll_[name]',
            path: path.join(__dirname, 'dll', '[name].manifest.json'),
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(env),
            },
        }),
        new UglifyJSPlugin({
            cache: true,
            parallel: true,
            exclude: [/node_modules/],
            uglifyOptions: {
                compress: {
                    warnings: false,
                    drop_console: true,
                    collapse_vars: true,
                    reduce_vars: true,
                },
                output: {
                    beautify: false,
                    comments: false,
                },
            },
        }),
    ],
};

DllPlugin 网上有一些例子，但都不完美，体现在以下 2 点：

• 没有压缩代码
• 没有 hash，当依赖更新时无法通知浏览器更新缓存

第 1 点比较好处理，加上 DefinePlugin 和 UglifyJSPlugin 就可以了。处理第 2 点的时候，除了在 output 加上 chunkhash，在引入 dll 的时候需要做一些额外的操作，下文会讲解。

这时在 package.json 加上一个命令，npm run dll一下就会生成一个类似这样的文件：vendor_dll_be1f5270e490dcb25f.js

{
    ...
    "scripts": {
        "dll": "cross-env NODE_ENV=production webpack --config webpack.dll.js --progress"
    }
    ...
}

dll 生成后，就要在构建的配置文件里将其引入，这时候就用到 DllReferencePlugin 和 AddAssetHtmlPlugin，配置如下

const fs = require('fs');
const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

const files = fs.readdirSync(path.resolve(__dirname, 'dll'));
const vendorFiles = files.filter(file => file.match(/vendor_dll_\w+.js/));
const vendorFile = vendorFiles[0];

module.exports = {
    ...
    plugins: [
        ...
        new webpack.DllReferencePlugin({
            manifest: require('./dll/vendor.manifest.json'),
        }),
        new AddAssetHtmlPlugin({
            filepath: path.resolve(__dirname, `dll/${vendorFile}`),
            includeSourcemap: false
        }),
        ...
    ],
};

DllReferencePlugin 的作用是将打包好的dll文件传入构建的代码里面，而 AddAssetHtmlPlugin 的作用是在生成的 html 文件中加入 dll 文件的 script 引用。网上的例子一般是将 dll 的文件名直接写死的，但由于在上一步构建 dll 的时候加入了 hash，所以要通过 fs 读取真实的文件名，再注入到 html 中。

• HappyPack

大家都知道 webpack 是运行在 node 环境中，而 node 是单线程的。webpack 的打包过程是 io 密集和计算密集型的操作，如果能同时 fork 多个进程并行处理各个任务，将会有效的缩短构建时间，HappyPack 就能做到这点。下面是它的相关配置：

const HappyPack = require('happypack');
const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                use: [{
                    loader: 'happypack/loader?id=happyBabel',
                }],
            },
            {
                test: /\.css$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['happypack/loader?id=happyCss'],
                }),
            }
        ],
        ...
        plugins: [
            ...
            new HappyPack({
                id: 'happyBabel',
                loaders: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: ['react', 'es2015', 'stage-0'],
                        plugins: ['add-module-exports', 'transform-decorators-legacy'],
                    },
                }],
                threadPool: happyThreadPool,
                verbose: true,
            }),
            new HappyPack({
                id: 'happyCss',
                loaders: ['css-loader', 'postcss-loader'],
                threadPool: happyThreadPool,
                verbose: true,
            }),
        ],

其中happyThreadPool是根据cpu数量生成的共享进程池，防止过多的占用系统资源。

三、减少页面加载时间

对于 web 应用来说，减少页面加载时间一般有 2 种方法。一是充分利用浏览器缓存，减少网络传输的时间。另外就是减少 JS 运行的时间，通过 SSR 等方式实现。利用 webpack 能有效的抽取出共享的资源，提高缓存的命中率。这里用到的插件除了上文提到的 DllPlugin 外，还有 CommonsChunkPlugin，相关配置如下：

module.exports = {

    entry: {
        vendor: ['zent','lodash']
        app: ['babel-polyfill', 'react-hot-loader/patch', './src/main.js']
    },
    ...
    plugins: [
        ...
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor'],
            minChunks: Infinity,
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'app',
            minChunks: 3,
            children: true,
            async: 'chunk-vendor',
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['manifest'],
            minChunks: Infinity,
        }),
        new webpack.HashedModuleIdsPlugin(),
        new InlineManifestWebpackPlugin({
            name: 'webpackManifest',
        }),
        ...
    ],
};

插件的第一部分是将 vendor 构建一个独立包；第二部分是抽取 app 入口文件 code split 之后所有子模块的公共模块，进一步减少子模块的大小；第三部分将 webpack 的启动代码独立打成一个 manifest 包，配合 HashedModuleIdsPlugin 可以保证每次构建的时候只要 vendor 内容不变，它的 hash 就不变。InlineManifestWebpackPlugin 的作用是将 manifest 文件内联到 html 模板中，减少一次网络请求。

四、总结

经过上述的优化之后，开发模式构建只需要 60 秒左右；生产模式构建只需要 150 秒左右，时间减少一半！缓存命中方面，可以做到基础模块（React等）和比较少变动的模块（组件库）分离出来，当组件库更新的时候依然可以使用基础模块的缓存（通过 dll 实现）。

通过这次的优化，对 webpack 的理解加深了不少，取得了比较不错的优化效果。另外也学习了 loader 和 plugin 的工作原理，有机会另写一篇文章分享。

如果你对 webpack 的工作原理感兴趣，可以看看我写的另一篇文章webpack启动代码源码解读