Webpack 配置优化：提高打包速度

Webpack 是前端开发中常用的模块打包工具，其具有高度可配置性和灵活性，可以实现多样的目标。

然而，在实际使用中，Webpack 打包速度的问题却是一个需要考虑的因素。特别是在大型项目或者需要频繁进行开发迭代的场景下，打包速度的提升可以为开发带来巨大的便利。

在本文中，我们将介绍一些 Webpack 配置优化的实践，从而提高打包速度。

1. 使用多进程编译

Webpack 默认只会使用单个进程进行编译，而对于大型项目来说，这种方式显然是不够高效的。

有些开发者会选择使用 thread-loader 或者 HappyPack 插件来开启多进程编译，但是这样做对于多数项目来说并没有显著的提升。

我们建议直接使用 Webpack 5 提供的 parallelism 和 cache 选项，这样可以让 Webpack 自动开启多进程编译，并且可以享受完整的状态缓存带来的优势。

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
  },
  parallelism: 4,
  // ...
};

2. 缩小文件搜索范围

Webpack 默认会搜索全部的文件来进行打包，而对于大型项目或者传统的后端渲染项目，一些文件其实是不需要被打包的。

通过使用 include 和 exclude 参数，可以限制 Webpack 只搜索特定的文件或者忽略某些文件：

// www.javascriptcn.com code example
module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
    modules: ['src', 'node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/i,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  // ...
};

3. 引入 DLL 特性

DLL（动态链接库）特性可以将某些库的打包过程从主要的打包流程中剥离出来，从而提高打包速度。

通常来说，我们将常用的库打包成 DLL 文件，然后在实际项目中使用 DllReferencePlugin 插件来引用这些 DLL 文件，从而实现动态链接。

// www.javascriptcn.com code example
// 公共配置
const vendorLibs = [
  'react',
  'react-dom',
  'react-router-dom',
  // ...
];

// webpack.vendor.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    vendor: vendorLibs,
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '_[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name].manifest.json'),
      name: '_[name]_[hash]',
    }),
  ],
};

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const vendorManifest = require('./dist/vendor.manifest.json');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: vendorManifest,
    }),
  ],
  // ...
};

4. 使用 Cache-loader

Cache-loader 插件可以在编译过程中使用内存缓存，从而大幅提升打包速度。

在需要使用此插件的规则中添加 cache-loader 即可：

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/i,
        exclude: /node_modules/,
        use: [
          'cache-loader',
          'babel-loader',
        ],
      },
    ],
  },
  // ...
};

5. 懒加载和按需加载

最后一点建议是尽可能使用懒加载和按需加载，这样可以减小初始包的大小，从而加速首屏渲染。

懒加载可以使用 import() 方法导入模块：

import('./lazy-module').then((module) => {
  console.log('loaded:', module);
});

而按需加载可以使用 @loadable/component 这样的插件：

// www.javascriptcn.com code example
import loadable from '@loadable/component';

const LazyComponent = loadable(() => import('./lazy-component'));

function App() {
  return (
    <div>
      <h1>Hello, World</h1>
      <LazyComponent />
    </div>
  );
}

以上就是一些 Webpack 配置优化的实践，我们相信这些方法可以帮助你提高打包速度，从而更方便地进行前端开发。

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