如何提高webpack的打包速度?

优化 Loader

• Loader 中影响打包效率的必属 Babel

  • Babel 会将代码转为字符串生成 AST

  • 对 AST 继续进行转变最后再生成新的代码

  • 项目越大，转换代码越多，效率就越低

• 优化 Loader 的文件搜索范围

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

• 过滤掉 node_modules （已经编译过）

• 将 Babel 编译过的文件缓存

loader: 'babel-loader?cacheDirectory=true'

HappyPack

• Webpack 单线程的

• HappyPack 可以将 Loader 的同步执行转换为并行的

module: {
  loaders: [
    {
      test: /.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]

DllPlugin

• DllPlugin 将特定的类库提前打包然后引入

  • 减少打包类库的次数，只有当类库更新版本才有需要重新打包

  • 将公共代码抽离成单独文件

// 单独配置在一个文件中
// webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    // 想统一打包的类库
    vendor: ['react']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]-[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      // name 必须和 output.library 一致
      name: '[name]-[hash]',
      // 该属性需要与 DllReferencePlugin 中一致
      context: __dirname,
      path: path.join(__dirname, 'dist', '[name]-manifest.json')
    })
  ]
}

• 执行这个配置文件生成依赖文件，接下来需要使用 DllReferencePlugin 将依赖文件引入项目中

// webpack.conf.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}

代码压缩

• 在 Webpack3 中

  • 用 UglifyJS 来压缩代码：单线程

  • 用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS

• 在 Webpack4 中

  • 将 mode 设置为 production 就可以默认开启以上功能

其他

• resolve.extensions：用来表明文件后缀列表

  • 默认查找顺序是 ['.js', '.json']

  • 尽可能减少后缀列表长度，再将出现频率高的后缀排在前面

• resolve.alias：通过别名来映射一个路径

• module.noParse：确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件

链接：juejin.cn/post/719706…