webpack-生产环境构建优化

刚刚对我们前端项目做了一顿分析优化操作，因为接手时每次构建要花两分钟左右的时间，实在忍受不了，只能动手了。通过这次优化，重新温习了下 webpack 的一些知识。接下来会关于 webpack 展开写几篇心得：

构建分析
开发环境构建优化
生产环境构建优化
webpack 原理浅析
如何实现一个简易版 webpack
如何手写一个 loader 和 plugin

好了，进入主题，本篇主要是介绍生产环境构建优化（包含速度、体积）。

1. 版本升级

建议更新到最新稳定版本，为什么呢？可以看我上一篇开发环境构建优化。

2. devtool

不设置 devtool 或者设置如下：

module.exports = {
    devtool: 'none',
    // ...
}

为什么呢？可以看我上一篇开发环境构建优化。

3. optimization 优化

optimization 介绍

一些 plugin 比如压缩混淆在开发环境是没有意义的，所以需要写两份不同的配置文件，防止这些插件作用在开发环境。

以下配置用于生产环境，可以优化生产环境构建：

module.exports = {
  // ...
  optimization: {
    minimize: true,
    splitChunks: {
        chunks: 'all',
        minSize: 30000,
        automaticNameDelimiter: '-',
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                name: 'vendors'
            }
        }
        ...
    },
    runtimeChunk: {
        name: "manifest"
    }
    ...
  },
  // ...
}

4. clean-webpack-plugin

用于清除之前构建生成的 dist 目录的文件。

var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    // ...
    plugins: [
      new CleanWebpackPlugin(['dist/pc/*.*'], {
          root: path.resolve(__dirname, '../')
      }),
    ]
};

5. HashedModuleIdsPlugin

该插件会根据模块的相对路径生成一个四位数的 hash 作为模块 id, 建议用于生产环境。具体可以看官网

module.exports = {
    // ...
    plugins: [
      new webpack.HashedModuleIdsPlugin(),
    ]
};

6. DllPlugin

注意：重要优化手段, 是什么，这里不做介绍了，可以查看官网介绍

下面是我的一些配置，可以参考下：

// webpack.dll.js
module.exports = {
    // ...
    plugins: [
      new webpack.DllPlugin({
        context: path.resolve(__dirname, '../'),
        name: '__dll__[name]',
        path: path.join(__dirname, '../dist/dlls/', '[name].manifest.json')
      }),
    ]
};

// webpack.prod.js
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
        context: path.resolve(__dirname, '../'),
        name: '__dll__vendors',
        manifest: path.join(__dirname, '../dist/dlls/', 'vendors.manifest.json')
    }),
    new webpack.DllReferencePlugin({
        context: path.resolve(__dirname, '../'),
        name: '__dll__baiduMap',
        manifest: path.join(__dirname, '../dist/dlls/', 'baiduMap.manifest.json')
    })
  ]
}

7. assets-webpack-plugin

使用 DLL & DllReference 后，第三方库的确前置构建了，但是如何让打包出来的 bundle 文件在 index.html 中引用呢？如果 output.fileName 写死名字，在 index.html 中也写死，就没有了强缓存，如果 ouput.fileName=[name].[hash].js，就得找到一个往 html 里添加 js 的办法

有了这个插件，看起来就行得通了，在打包第三库时使用 assets-webpack-plugin 将 bundle 的文件名输出，保存成 json，在打包业务代码时配合 html-webpack-plugin 插件，将 bundle 添加到 index.html 中

该插件生成一个记录了版本号的文件；详细的可以看官网地址

var AssetsPlugin = require('assets-webpack-plugin');

module.exports = {
  plugins: [
    new AssetsPlugin({
        filename: 'dll-bundle.json',
        path: path.resolve(__dirname, './')
    })
  ]
}

我的 dll-bundle.json 如下：

1	{"baiduMap":{"js":"/dist/dlls/baiduMap.dll.6c409412.js"},"vendors":{"js":"/dist/dlls/vendors.dll.6c409412.js"}}

8. 其他

我上一篇开发环境用到的文件压缩和 CDN …，这些在生产环境也可以用，看你的需求了。

大家还有没有其他的优化黑魔法，欢迎大家留言交流，共同学习成长。