Webpack 5 性能优化

构建速度优化

持久化缓存

module.exports = {
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename]
    }
  }
};

缩小构建范围

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: "babel-loader"
    }]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  }
};

多线程构建

const ThreadCssPlugin = require("thread-css-plugin");

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
};

输出体积优化

Tree Shaking

module.exports = {
  mode: "production",
  optimization: {
    usedExports: true,
    sideEffects: true
  }
};

代码分割

import(/* webpackChunkName: "lodash" */ "lodash");

分析工具

npm install --save-dev webpack-bundle-analyzer

优化构建性能能显著提升开发体验和生产效率。