Webpack 打包缓慢的解决方案-JavaScript中文网-JavaScript教程资源分享门户

如果你是一个前端开发者，那么你一定会用到 Webpack 这个打包工具。Webpack 是一个非常强大的工具，可以将多个文件打包成一个或者多个文件，减少 HTTP 请求，提高应用程序的性能。但是，如果你使用 Webpack 打包的项目非常大，那么打包的速度就会变得非常慢，这不仅影响了你的开发效率，还会影响团队的开发效率。在本文中，我们将介绍一些可以解决 Webpack 打包缓慢的解决方案。

分析打包时间

在对 Webpack 打包速度进行优化之前，我们需要先分析一下打包的时间。Webpack 有一个插件叫做 speed-measure-webpack-plugin，这个插件可以帮助我们分析每个加载器的打包时间，以及每个插件的打包时间。我们可以通过以下步骤安装 speed-measure-webpack-plugin：

npm install speed-measure-webpack-plugin --save-dev

然后在 webpack.config.js 文件中引入 speed-measure-webpack-plugin 插件：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  // Webpack 的配置信息
});

引入插件之后，我们就可以通过运行打包命令来查看 Webpack 的打包时间了：

npm run build

我们可以看到类似以下的输出：

// javascriptcn.com 代码示例
 SMP ⏱  Plugins
 SMP ⏱   ─clean-webpack-plugin: 414.839ms
 SMP ⏱   ─html-webpack-plugin: 306.750ms
 SMP ⏱   ─mini-css-extract-plugin: 900.549ms (avg)
 SMP ⏱  Loaders
 SMP ⏱   ─babel-loader: 7.282ms (avg)
 SMP ⏱   ─eslint-loader: 17.756ms (avg)
 SMP ⏱   ─css-loader: 6.332ms (avg)
 SMP ⏱   ─postcss-loader: 10.826ms (avg)
 ...
 SMP ⏱  General
 SMP ⏱   ─building time: 22.537s

我们可以看到每个加载器和插件使用的平均时间，以及整个打包过程的时间。通过这个插件，我们可以知道哪些加载器和插件的使用时间很长，从而找到需要优化的地方。

使用多线程打包

Webpack 默认是使用单线程进行打包的，因此打包时间会比较慢。但是，Webpack 也可以使用多线程打包，这将大大减少打包时间。我们可以使用 webpack-parallel-uglify-plugin 插件来实现多线程打包。这个插件可以同时使用多个进程来运行 UglifyJS 来压缩 JavaScript 代码。我们可以通过以下步骤安装这个插件：

npm install webpack-parallel-uglify-plugin --save-dev

然后在 webpack.config.js 文件中引入插件：

// javascriptcn.com 代码示例
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
  // Webpack 的配置信息
  plugins: [
    new ParallelUglifyPlugin({
      // UglifyJS 的配置
    })
  ]
};

我们可以使用 ParallelUglifyPlugin 的 options 参数来设置 UglifyJS 的配置。例如，我们可以设置 UglifyJS 使用多少进程来运行压缩：

// javascriptcn.com 代码示例
new ParallelUglifyPlugin({
  uglifyJS: {
    output: {
      beautify: false, // 是否紧凑输出
      comments: false // 是否保留注释
    },
    compress: {
      warnings: false, // 是否显示警告
      drop_console: true, // 是否删除 console
      collapse_vars: true, // 是否将变量突出显示
      reduce_vars: true // 是否删除未使用的变量
    },
    sourceMap: false, // 是否生成 sourceMap
    cache: true, // 是否启用缓存
    parallel: true, // 是否使用多进程
    workers: os.cpus().length // 启用的进程数，默认为 CPU 核心数
  }
})

使用 HappyPack 加速加载器

Webpack 打包时，加载器也是很重要的一部分。默认情况下，Webpack 同时只能处理一个文件，这意味着加载器也是单线程的，因此可能会降低打包速度。lin Clark 写了一个叫做 HappyPack 的插件，这个插件可以让加载器的处理过程并行化，从而加快打包速度。我们可以通过以下步骤安装 HappyPack：

npm install happypack --save-dev

然后在 webpack.config.js 文件中配置 HappyPack：

// javascriptcn.com 代码示例
const HappyPack = require('happypack');

module.exports = {
  // Webpack 的配置信息
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['happypack/loader?id=js'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['happypack/loader?id=css'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js', // 用来标识 HappyPack 处理哪类文件
      loaders: ['babel-loader']
    }),
    new HappyPack({
      id: 'css',
      loaders: ['css-loader', 'postcss-loader']
    })
  ]
}

我们可以对每种类型的文件使用一个HappyPack 实例，这个实例包含一个唯一的 id（用来标识这个实例的文件类型）和 loaders（需要使用的加载器）。这样一来，Webpack 在处理每个文件时，就可以将加载器的处理过程分配给多个线程，从而加快打包速度。

使用 DllPlugin 加快开发环境的打包速度

在开发环境下，Webpack 的打包速度可能会影响我们的开发效率。每次修改代码后，都需要重新打包一次，这会浪费很多时间。但是，我们可以使用一种叫做 DllPlugin 的插件来加快开发环境的打包速度。

DllPlugin 可以将第三方库打包成单独的文件，这样在开发环境下就不需要每次都打包这些库了。我们可以使用以下步骤来配置 DllPlugin：

在项目根目录中创建一个名为 dll.config.js 的文件，这个文件用于配置 DllPlugin：

// javascriptcn.com 代码示例
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  entry: {
    // 第三方库列表
    vue: ['vue'],
    react: ['react', 'react-dom']
  },
  output: {
    filename: 'dll/[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_[hash]'
  },
  plugins: [
    new DllPlugin({
      name: '[name]_[hash]', // 全局变量名
      path: path.join(__dirname, 'dist', '[name].manifest.json') // 生成的映射表
    })
  ]
};

执行如下命令生成静态文件：

webpack --config dll.config.js

使用 webpack.DllReferencePlugin 插件在 webpack.config.js 文件中引入第三方库：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // Webpack 的配置信息
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require(path.join(__dirname, 'dist', 'vue.manifest.json'))
    }),
    new webpack.DllReferencePlugin({
      manifest: require(path.join(__dirname, 'dist', 'react.manifest.json'))
    })
  ]
}

我们可以在开发环境下使用这些静态文件，从而加快打包速度。最后，我们需要注意的是，DllPlugin 只适用于开发环境，因为这个插件会生成一些静态文件，这样一来，我们就需要在编译之前生成这些静态文件。在生产环境下，我们需要将所有的代码都打包成一个文件，这样可以减少 HTTP 请求，提高应用程序的性能。

总结

Webpack 是一个非常强大的工具，但是在处理大型项目时，打包速度可能会变得非常慢。在本文中，我们介绍了一些优化 Webpack 打包速度的方法，包括分析打包时间、使用多线程打包、使用 HappyPack 加速加载器、以及使用 DllPlugin 加快开发环境的打包速度。我们希望这些方法能够帮助你提高打包速度，减少浪费的时间。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f6b37bf6b2d6eab3f42870