Webpack 中增加打包速度的多种方式

Webpack 是前端开发中常用的模块打包工具，但是在项目较大时，Webpack 打包速度会变慢，影响开发效率。本文将介绍多种方式来优化 Webpack 打包速度，帮助开发者提高开发效率。

1. 使用 DLLPlugin

DLLPlugin 是一个 webpack 插件，用于将第三方库（如 React、Vue 等）打包成独立的动态链接库，从而提高打包速度。在开发过程中，这些库很少会改变，因此将其单独打包成 DLL 文件，可以减少每次打包时的时间。

使用 DLLPlugin 需要先创建一个配置文件，如 webpack.dll.config.js：

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'lodash'], // 需要打包的第三方库
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_dll', // 输出的文件名及对外暴露的变量名
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: path.resolve(__dirname, 'dist', '[name].manifest.json'),
    }),
  ],
};

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

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'vendor.manifest.json'),
    }),
  ],
};

2. 使用 HappyPack

HappyPack 是一个 webpack 插件，用于将任务分解给多个子进程并行执行，从而提高打包速度。HappyPack 可以用于处理 JavaScript、CSS、Less、Sass 等文件。

使用 HappyPack 需要先安装插件：

npm install happypack -D

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

// www.javascriptcn.com code example
const path = require('path');
const HappyPack = require('happypack');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threads: 4, // 子进程数量
      loaders: ['babel-loader'], // 使用的 loader
    }),
  ],
};

3. 使用 cache-loader

cache-loader 是一个 webpack loader，用于缓存模块的编译结果，从而减少重复的工作，提高打包速度。cache-loader 可以用于处理 JavaScript、CSS、Less、Sass 等文件。

使用 cache-loader 需要先安装插件：

npm install cache-loader -D

然后在 webpack.config.js 中配置 cache-loader：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve(__dirname, '.cache'),
            },
          },
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

4. 使用 DllReferencePlugin

DllReferencePlugin 是一个 webpack 插件，用于引入 DLL 文件中的代码，从而减少打包时间。使用 DllReferencePlugin 需要先创建一个 DLL 文件，具体方法见上文。

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

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'vendor.manifest.json'),
    }),
  ],
};

5. 使用 externals

externals 是一个 webpack 配置项，用于将某些依赖的库排除在打包范围之外，从而减少打包时间。使用 externals 需要在代码中手动引入这些库，或者在 HTML 文件中通过 CDN 引入。

在 webpack.config.js 中配置 externals：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

然后在代码中手动引入这些库：

import React from 'react';
import ReactDOM from 'react-dom';

结语

以上是优化 Webpack 打包速度的多种方式，开发者可以根据项目需求选择适合自己的方式。在实际开发中，也可以将这些方式结合起来使用，从而进一步提高打包速度。

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