webpack 打包 性能优化

当我们在打包一些大的项目的时候，会发现，打包的时间非常非常的长。

这时候除了等待，我们还可以思考如何提高webpack 打包效率。

比如下面几个点：

1.  版本更新（技术迭代）

      升级 webpack / node / npm / yarn 版本

2. 尽可能少的模块上应用 Loader

 如下，我们通过设施exclude，使node_modules 中的代码，不用loader （也可以设置include：path.resolve(__dirname, ../src)）

{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
          {
              loader: 'babel-loader'
          },
          // {
          //     loader: 'imports-loader?this=>window'
          // }
      ]
    }

这样就降低了 loader 被频繁执行的频率。

3. 尽可能少地使用plugin 并确保plugin可靠

    尽可能使用官方推荐的plugin ，一般性能有保证

4. resolve 参数合理配置（尽量少配一些）

我们可以给webpack 配置resolve 参数，如下。

当我们引入其他目录下的模块的时候（没写扩展名），webpack 会根据配置的默认的扩展名挨个查目录下文件直到找到文件。

  resolve: {
    extensions: ['.js', '.vue', '.json']
  },

5. 使用DllPlugin 提高打包速度

我们每次打包，都会重新将node_modules 中的内容进行处理，那么为什么不把它单独拿出来，然后只打包一次，以后使用这一次的好呢。于是，我们先写一个配置文件，如下。这样运行这个打包配置，就可以将我们需要的两个库打包到/dll/venders.sll.js 中了。

const path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll')
    }
}

那么项目中要如何使用呢。我们可以给上面的output 配置项，配置library 如下。

const path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll'),
        library: '[name]'
    }
}

然后，我们需要安装一个插件 add-asset-html-webpack-plugin，如下。

npm install add-asset-html-webpack-plugin --save

然后，回到webpack.config.js 中，添加这个plugin，如下。

const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(),
      new addAssetHtmlWebpackPlugin({
          filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
      })
  ]
...
}

接下来，我们来做一个webpack 中的映射。打开新的webpack配置文件（只打包node_modules代码的），如下。

const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll'),
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: path.resolve(__dirname, '../dll/[name].manifest.json')
        })
    ]
}

上面plugin 中配置，意思是 使用webpack.DllPlugin 工具，对name 文件进行分析，把name 文件中第三方模块的映射关系找出来，并写到path 中。

有了这个映射文件，那么webpack 打包的时候，对代码进行分析，如果代码是在这个映射文件中，那么就可以直接使用vendors.dll.js 即可。

这时，把映射文件关联上，就需要我们再去 webpack.config.js 中配置另一项 plugin 了，如下。

  plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(),
      new addAssetHtmlWebpackPlugin({
          filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
      }),
      new webpack.DllReferencePlugin({
          manifest:path.resolve(__dirname, '../dll/vendors.manifest.json')
      })
  ]

6. thread-loader, parallel-webpack, happypack 多进程打包

7. 合理使用source-map

...