Webpack打包构建太慢了?试试这几个提升打包速度方案

Webpack 是一个强大的模块打包工具，能够帮助开发者将 JavaScript 代码、CSS、图片等资源进行打包。然而，随着项目的不断扩展，Webpack 的打包速度往往会变得缓慢。这不仅影响了开发效率，还可能影响到整个项目的迭代速度。本文将介绍几个提升 Webpack 打包速度的方案，并给出相关代码示例，帮助你优化打包过程。

1. 使用 webpack --watch

在开发过程中，使用 webpack --watch 命令可以让 Webpack 监视源文件的变化，自动重新打包，而不是每次都完全重建。这可以显著提高开发效率，节省时间。

webpack --watch

2. 开启缓存

Webpack 5 版本引入了持久化缓存的功能，这可以显著提升后续构建的速度。通过启用缓存，Webpack 会缓存打包结果，下次打包时只需重新构建发生变化的模块。

在 webpack.config.js 中配置缓存：

module.exports = {
  // ...
  cache: {
    type: 'filesystem', // 使用文件系统缓存
  },
};

3. 使用多线程构建

使用 terser-webpack-plugin 进行 JS 压缩时，可以启用多线程以提高打包速度。多线程可以将工作的负载分散到多个线程上，充分利用 CPU 资源。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true, // 开启多线程
      }),
    ],
  },
};

4. 按需加载

按需加载（Code Splitting）是指根据需要加载模块，而不是在初始加载时加载所有代码。这样可以减少初始加载时间，提高应用的响应速度。使用 import() 动态导入模块可以实现按需加载。

// 示例：按需加载模块
import(/* webpackChunkName: "myChunk" */ './myModule').then(module => {
  // 使用加载的模块
});

5. 使用 DllPlugin

DllPlugin 可以将一些第三方库或不常改变的模块提前打包，生成一个动态链接库 (DLL)。在主项目中只需要引入这个 DLL，就可以减少打包时间。

首先创建一个单独的配置文件打包公共依赖：

// webpack.dll.config.js
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'], // 需要打包的依赖
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: '[name].js',
    library: '[name]_lib', // DLL 输出库名称
  },
  plugins: [
    new DllPlugin({
      name: '[name]_lib',
      path: path.join(__dirname, 'dll', '[name]-manifest.json'),
    }),
  ],
};

在主项目中引入 DLL：

// 在主项目的入口文件中引入
import './dll/vendor.js'; // 引入生成的 dll 文件

6. 脚本优化

在开发过程中，如果可以避免一些不必要的脚本或资源，就能加快打包速度。比如，使用环境变量控制打包的插件和加载的资源。

if (process.env.NODE_ENV === 'production') {
  // 只在生产环境才引入的插件和配置
}

7. 精简图片和字体的加载

尽量压缩图片和字体文件，使用 image-webpack-loader 等工具优化图片，减小文件体积，从而提高加载速度。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              // 其他图片压缩配置
            },
          },
        ],
      },
    ],
  },
};

结论

通过以上几种方法，你可以在使用 Webpack 打包项目时显著提高打包速度。从开启缓存、多线程构建，到合理使用按需加载和优化插件，这些方案结合实践将大大提升你的开发效率。希望这些建议对你在优化 Webpack 打包过程中有所帮助。