WEBPACK优化总结【2023】

1. 提升开发体验
source map让开发或上线的代码报错更加准确的错误提示
开发环境：'cleap-module-source-map' 打包编译速度快，只包含行映射，但没有列映射，因为开发模式代码会被格式化，每一行代码少，因此不需要列映射，也可以找到错误位置。
生产环境：source map 包含行/列映射，但打包速度慢

2. 提升打包构建速度
HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
注：只适用于开发环境
oneof资源文件一旦被某个loader处理，就不会继续遍历，打包速度更快。
include/exclude排除或只检测某些文件，处理文件更少，速度更快。
cache 对eslint和label处理的结果进行缓存，让第二次打包速度更快。
Thead 多进程处理eslint和label任务，速度更快。
注：进程启动会有开销，要比较多代码处理时使用才有效

3. 减少代码体积
Tree shaking 剔除没有使用的代码，让代码体积更小，它依赖于es module，webpack默认开启此功能，无需其他配置。
@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。

4. 优化代码运行速度
code split 对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载，速度更快，并通过import动态导入语法进行按需加载，从而达到需要时才加载该资源，不用时不加载。
preload/prefetch 对代码进行提前加载，等未来需要时就直接使用，从而使用户体验更好。
network cache 能对输出资源文件进行更好的命名，将来做缓存，从而使用户体验更好。
corejs对js进行兼容处理，代码能运行在低版本浏览器。
PWA让代码离线也可以访问，而提升用户体验。