【Webpack5】打包优化配置，让你的项目跑得飞快！

Webpack5打包优化配置，让你的项目跑得飞快！

Webpack是一个非常强大的前端打包工具，但是如果你的项目越来越大，打包时间也会越来越长，让人十分痛苦。但是不要担心，今天我就来给大家分享一些Webpack5打包优化配置，让你的项目跑得飞快！

首先，我们需要安装一些必要的插件：

npm install -D speed-measure-webpack-plugin
npm install -D hard-source-webpack-plugin

这些插件可以帮助我们分析打包时间，并且缓存一些不变的模块，以便下次打包时可以更快地构建。

接下来，我们需要在webpack.config.js中进行一些配置：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HardSourceWebpackPlugin(),
  ],
});

其中，SpeedMeasurePlugin可以帮助我们分析每个模块的构建时间，以便我们优化打包速度。HardSourceWebpackPlugin可以缓存一些不变的模块，以便下次打包时可以更快地构建。

除了这些插件之外，我们还可以使用splitChunks来分离代码块，以便更好地利用缓存：

optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
},

这样做可以将公共代码块分离出来，并缓存起来，以便下次使用时可以更快地加载。

最后，我们还可以使用thread-loader将一些耗时的loader放到worker池中，以便并行处理：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
    "thread-loader",
    "babel-loader",
  ],
},

这样做可以让Webpack在处理模块时更加高效，从而提高打包速度。