每个的 loader、plugin 都有其启动时间。尽量少地使用工具，将非必须的 loader、plugins 删除。

3.1 指定 include

为 loader 指定 include，减少 loader 应用范围，仅应用于最少数量的必要模块，。

webpack 构建性能文档

rule.exclude 可以排除模块范围，也可用于减少 loader 应用范围.

在 webpack.common.js 配置

// 引入 paths.js 配置的路径
const paths = require('./paths');
module.exports = {
    rules: [
        {
            test: /\.(js|ts|jsx|tsx)$/,
              // 使用进入的路径配置
            include: paths.appSrc,
            use: [
              {
                loader: 'esbuild-loader',
                options: {
                  loader: 'tsx',
                  target: 'es2015',
                },
              }
            ]
         }
    ]
}

定义 loader 的 include 后，构建时间将减少 12%，效果如下：

3.2 管理资源

使用 webpack 资源模块 (asset module) 代替旧的 assets loader（如 file-loader/url-loader/raw-loader 等），减少 loader 配置数量。

webpack.commcn.js配置方式如下：

module.exports = {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      include: [
        paths.appSrc,
      ],
      // 使用wbepack 最新的 asset/resource 解析文件
      type: 'asset/resource',
    },
  ]
}