webpack 优化方式

量化webpack打包事件

• 通过speed-measure-webpack-plugin进行插件、loader等的速度测量

缩小打包范围

• 通过oneof、exclude、include缩小打包范围

去除开发阶段不需要打包配置

• loader：如postcss-loader
• babel:：开发阶段可以适当的把target调高到es2015

使用缓存

• webpack5通过cache配置开启缓存，生成.cache目录存放文件，极大得改善二次构建速度

cache:{
	type:'filesystem',
	buildDependencies:{
		config:[__filename]
	}
}

• babel缓存：

loader:"babel-loader",
options:{
	cacheDirectory:true,
	//不压缩缓存文件，进一步提升构建速度
	cacheCompression:false
}

• cache-loader:webpack4中提供的一个持久化缓存的loader

{
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
},

多线程打包

• thread-loader:每个worker都是一个单独有600ms限制的node进程，跨进程的上下文切换和数据传递也会存在性能消耗，建议对高开销的loader使用

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

devtool（sourcemap）

• 开发阶段可采用：eval-cheap-module-source-map

替换babel-loader

• 采用速度更快的esbuild-loader、swc-loader，在兼容性上swc-loader要更好