webpack4 优化打包速度的常用方法？-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个现代化的 JavaScript 应用程序静态模块打包器。使用 Webpack 可以将整个项目拆分成多个模块进行交叉依赖，最终打包成一个或多个文件。在实际的开发中，Webpack 打包速度的优化是一个重要的问题。本文将介绍一些常用的优化打包速度的方法，以及如何在实际开发中使用这些方法。

1. 使用 DllPlugin 和 DllReferencePlugin 进行分离打包

如果你的项目中使用了一些第三方的库，这些库的代码很少改变，但是每次打包都会重新编译，这就浪费了时间。使用 DllPlugin 和 DllReferencePlugin 进行分离打包可以缓存第三方库的代码，从而节省打包时间。DllPlugin 将会生成一个包含给定名称的映射库。这个库包含了从这个库中导出的内容，并为这些导出创建了一个索引表，这些导出在入口中显示。然后，通过 DllReferencePlugin，主要的 webpack 配置文件可以告知一组“manifest”，这些 manifest 中描述了映射库中导出的信息，从而可以正确地访问这些依赖。

步骤：

在 webpack.config.js 中添加以下代码，将会创建一个名为 vendor-manifest.json 的文件。

const webpack = require('webpack')

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'jquery']
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.join(__dirname, '[name]-manifest.json')
    })
  ]
}

在 index.html 中引入打包好的 <script> 文件：

<script src="vendor.dll.js"></script>

在 webpack.prod.config.js 中添加以下代码，引用 manifest 文件：

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

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require(path.join(__dirname, 'vendor-manifest.json'))
    })
  ]
}

这样就可以加快打包速度了。

2. 使用 HappyPack 进行多线程打包

Webpack 本身是单线程的。打包大型项目时，会有很多文件需要处理，这会消耗大量的时间。使用 HappyPack 可以让 Webpack 使用多线程处理代码，从而加快打包速度。HappyPack 将任务分配给多个 worker 进程以达到并行处理的目的。

步骤：

安装 HappyPack：

npm install happypack --save-dev

在 webpack.config.js 中添加以下代码：

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=happyBabel'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'happyBabel',
      threadPool: happyThreadPool,
      loaders: ['babel-loader'],
      verbose: true
    })
  ]
}

这样就可以让 Webpack 使用多线程处理代码了。

3. 使用 MiniCssExtractPlugin 进行 CSS 提取

默认情况下，Webpack 把所有的 CSS 整合到 JavaScript 文件中。这会导致 JS 文件很大，加载时间很长。使用 MiniCssExtractPlugin 可以把 CSS 文件提取到独立的文件中，缩短页面加载时间。

步骤：

安装 MiniCssExtractPlugin：

npm install mini-css-extract-plugin --save-dev

在 webpack.config.js 中添加以下代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash:8].css',
      chunkFilename: '[id].[chunkhash:8].css'
    }),
  ]
}

这样就可以把 CSS 提取到独立的文件中了。

4. 使用 Tree Shaking 进行无用代码剔除

Tree Shaking 是一种可以使程序仅仅包含所需代码的技术，感谢 ES6 的 import 和 export 语句。使用 Tree Shaking 可以剔除掉无用的代码，减小打包体积，提高打包速度。

步骤：

确保使用 ES6 的 import 和 export 语句，避免使用 require。
在 webpack.config.js 中添加以下代码：

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true
  }
}

这样就可以使用 Tree Shaking 进行无用代码剔除了。

总结

以上是常用的优化 Webpack4 打包速度的方法，通过使用这些方法可以加快打包速度，提高开发效率。当然，这里提供的仅仅是入门级的方法，实际开发中还有更多更高效的方法。相信掌握了这些方法，对于前端性能优化会有很大的帮助。

参考文献：

Webpack 官方文档 https://webpack.js.org/
Github happy https://github.com/amireh/happypack
Webpack Tree Shaking https://zhuanlan.zhihu.com/p/30455389

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659f4f41add4f0e0ff7f97d5

webpack4 优化打包速度的常用方法？

1. 使用 DllPlugin 和 DllReferencePlugin 进行分离打包

2. 使用 HappyPack 进行多线程打包

3. 使用 MiniCssExtractPlugin 进行 CSS 提取

4. 使用 Tree Shaking 进行无用代码剔除

总结

纠错反馈