webpack优化的配置

一、编译速度

1、loader配置

includes || excludes

cra脚手架创建出来的webpack文件，自带两个关于babel-loader的配置，一个是src下源代码的编译配置，一个是src文件夹外，只编译标准的ES特性。 以上可以减少编译时间

2.并行编译

happypack

最后一次更新是4年前了，可见差不多快被遗忘了

thread-loader

webpack推荐用thread-loader代替happypack，但是普通的项目（我的项目），使用过后没什么效果，甚至有可能更慢

esbuild-loader

作为编译器可能不太理想，不支持es5及以下的编译产物。

swc-loader

兼容性比esbuild好一些，也不是很好用

3、缓存

webpack4可以用cache-loader,或者babel-loader的cacheDirectory配置项。还有hardSourceWebpackPlugin,都是可以提升二次打包速度。

webpack5中新增cache长期缓存

4、noParse

不解析属性代表的库的依赖。就比如moment和lodash，没有依赖别的库，就不用解析了

5、resolve

alias别名 extensions扩展名 减少尝试次数，确定文件查找路径和后缀

二、打包体积、加速压缩

1、加速压缩

uglifyjs

配置parellel参数，并行压缩

terser

默认多进程压缩并且缓存。

esbuildMinifyPlugin

多核CPU多线程压缩。

2、减少打包资源

externals

排除需要打包的全局变量，通过cdn引入，提速很明显。但是每次新的三方包更新，就得重新写cdn路径。cdn利于缓存。是SVIP

dllPlugin

动态链接库，提前将不易变动的三方库，打包进一个一个js文件，在dllReferencePlugin内指定去打包好的文件内查找。加快打包速度。多出来的js文件也利于浏览器缓存。是VIP

splitChunks

分包，将公用的模块分离出来，也是利于浏览器缓存。但是打包流程完成，无提速。非VIP

3、IgnorePlugin

应用场景就是moment,包含非常多的语言包。在本插件内忽略，应用内只导入自己用到的locale包。加速打包，减少打包体积

4、tree-sharking

webpack4只能跟踪导出未被使用的变量。 webpack5能处理嵌套的，内部模块的，和部分commonjs构造的tree-sharking。还能对源代码进行分析，自动标记为无副作用。

三、antd

antd5版本之前，需要babel-plugin-import进行按需加载的处理。5版本以后使用了css-in-js的方法，移除掉该plugin了