加速Webpack构建技巧总结

当我们在进行前端开发时，Webpack构建时间较长是一个令人头痛的问题。因此，我们需要一些加速Webpack构建的技巧，以提高工作效率。接下来，我将就如何加速Webpack构建进行详细讲解，并提供两个实际示例说明。

1. 使用缓存

当我们重新启动Webpack打包时，Webpack会花费一些时间来对每个模块进行重新解析和编译。而使用缓存可以避免重新编译相同的模块。我们可以使用cache-loader或者hard-source-webpack-plugin来启用缓存。其中，cache-loader通过将结果缓存在本地文件系统来加速Webpack构建。我们可以将其用于预处理器，例如Babel、TypeScript等。而hard-source-webpack-plugin则在本地文件系统中维护一个缓存的持久性文件系统，将构建结果缓存在其中，以加速Webpack的重新构建。

2. 开启babel缓存

Babel是一个非常慢的预处理器。当我们使用Babel编译JavaScript代码时，可以通过babel-loader开启缓存来避免重新编译未更改的模块。我们可以在babel-loader的options选项中设置cacheDirectory为true来启用缓存选项。

3. 减少Loader的文件匹配范围

每个webpack构建工具将会从上百个模块中去构建编译模块，而在构建过程中，webpack在loader加载过程中同样使用了一种类似的匹配规则来匹配到对应的模块并进行处理。而对于某些loader比如说‘file-loader’, ‘url-loader’等，他们通常是对于对应的模块则进行移动或者打上标记（transform），但是这种对于全部类型文件去匹配的做法，实际上大大加重了Webpack的负担，因为它无法识别出文件类型，常规的做法就是将一个与全部文件的配置都进行指定，从而在loader解析的时候能够快速的对应到合适的处理方式，来解析或转码文件。

4. 使用DllPlugin预编译资源模块

一般来说，webpack在编译模块的时候，会遇到某些模块不会频繁地变动，那么我们可以将这些几乎不变的模块向外部拆分出来，然后使用DllPlugin这个插件进行预编译，从而在每次的打包构建过程中省去了这些几乎不会变更的模块，从而极大地提升Webpack的打包构建速度。

示例1：开启babel缓存

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, //开启babel缓存
            },
          },
        ],
      },
    ],
  },
};

示例2：使用DllPlugin预编译资源模块

// webpack.config.vendor.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'lodash'], // 需要预编译的库
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', '[name].json'),
    }),
  ],
};

// webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dll/vendor.json'),
    }),
  ],
};

以上是加速Webpack构建技巧总结的完整攻略，希望对你有所帮助。