是什么

提高devServer或者build的速度

如何优化

• 优化loader配置

通过test、exclude、include属性匹配文件

• 合理使用resolve.extensions

module.exports = {
    ...
    extensions:[".warm",".mjs",".js",".json"]
}

• 优化resolve.modules

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // 其中 __dirname 表示当前工作目录，也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

• 优化resolve.alias

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}

• 使用DllPlugin插件 可以共享，不经常改变的代码，抽成一个共享的库

1. 打包

module.exports = {
    ...
    plugins:[
        new webpack.DllPlugin({
            name:'dll_[name]',
            path:path.resolve(__dirname,"./dll/[name].mainfest.json")
        })
    ]
}

2. 引入dll库

module.exports = {
    ...
    new webpack.DllReferencePlugin({
        context:path.resolve(__dirname,"./dll/dll_react.js"),
        mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
    }),
    new AddAssetHtmlPlugin({
        outputPath:"./auto",
        filepath:path.resolve(__dirname,"./dll/dll_react.js")
    })
}

• 使用cache-loader

针对性能开销较大的loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.ext$/,
                use: ['cache-loader', ...loaders],
                include: path.resolve('src'),
            },
        ],
    },
};

• terser启动多线程

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};

• 合理使用sourceMap

1. 生产环境： cheap-module-source-map
2. 开发环境： cheap-module-eval-source-map

原理

FAQ