Webpack 打包速度优化指南

Webpack 是目前前端开发中使用最广泛的打包工具之一，它可以将多个模块打包成一个或多个文件，方便浏览器加载和使用。但是，随着项目变得越来越庞大，Webpack 打包的速度也会变得越来越慢。本文将介绍一些优化 Webpack 打包速度的技巧。

1. 使用多线程打包

Webpack 默认是单线程打包，每一个任务都是串行执行的。这就导致了打包速度缓慢，特别是在大型项目中。使用多线程打包可以将任务并行执行，从而提高打包速度。可以使用 HappyPack、thread-loader 等插件来实现多线程打包。

// javascriptcn.com 代码示例
// webpack.config.js
const HappyPack = require('happypack');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
      },
      {
        test: /\.css$/,
        use: 'happypack/loader?id=css',
      },
    ],
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threads: 4,
      loaders: ['babel-loader'],
    }),
    new HappyPack({
      id: 'css',
      threads: 2,
      loaders: ['style-loader', 'css-loader'],
    }),
  ],
};

2. 缩小打包范围

在配置 Webpack 的时候，我们可以通过 exclude 和 include 属性来缩小打包范围。这样可以减少打包的文件数量，从而提高打包速度。在配置时，可以排除一些不需要打包的文件或者只打包必要的文件。

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  // 排除 node_modules 目录
  externals: /^[a-z\-0-9]+$/,
  // 只打包 src 目录
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
};

3. 使用缓存

Webpack 打包时会生成很多中间文件，如果每次打包都重新生成这些文件，那么将会非常耗时。使用缓存可以避免这种情况。Webpack 4 默认开启了缓存，可以通过 cache 属性来控制缓存的行为。

// webpack.config.js
module.exports = {
  cache: true,
};

4. 使用 DllPlugin

DllPlugin 是一个可以将第三方库单独打包成一个文件的插件。这样可以避免每次打包时都需要重新打包第三方库，从而提高打包速度。使用 DllPlugin 需要先生成一个 manifest 文件，然后在项目中引入这个 manifest 文件。

// javascriptcn.com 代码示例
// webpack.config.dll.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom'],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_dll',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: path.join(__dirname, 'dist', '[name].manifest.json'),
    }),
  ],
};

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor.manifest.json'),
    }),
  ],
};

5. 压缩代码

在打包完成后，可以使用 UglifyJS 等工具来压缩代码。压缩后的代码体积更小，加载速度更快。可以使用 uglifyjs-webpack-plugin 插件来实现代码压缩。

// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new UglifyJSPlugin()],
  },
};

总结

本文介绍了一些优化 Webpack 打包速度的技巧，包括使用多线程打包、缩小打包范围、使用缓存、使用 DllPlugin 和压缩代码等。通过合理使用这些技巧，我们可以大大减少打包时间，提高开发效率。

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