前端性能优化
开发环境性能优化
js，css，图片压缩，替换依赖库cdn引入，减少dom操作，网络（多站点，多域名，大带宽），用户体验（骨架屏，占位图）
优化打包构建速度
HMR 热模块替换
优化代码调试
source-map(保存打包后和之前的映射关系)
生产环境性能优化
优化打包构建速度
* oneOf
使用oneOf 根据文件类型加载对应的loader，只要能匹配一个即可退出，
对于同一类型文件，比如处理js，如果需要多个loader，可以单独抽离js处理，确保oneOf里面一个文件类型对应一个loader
可以配置 enforce: 'pre',指定优先执行
* babel缓存
避免每次构建时都重新解析和转换所有文件。Babel 通过缓存机制存储已编译文件的中间结果，之后再构建时直接使用缓存，减少了重复工作。
* 多线程打包
* externals
告诉webpack某些模块或库应该被排除在打包之外，转而由外部提供。这通常用于 CDN 引入的第三方库，或者是你的项目中已经存在的库。
* dll
将第三方库打包成单独的动态链接库文件，使得它们可以被缓存，从而避免每次构建时都重新打包这些库
优化代码运行的性能
* 缓存(hash-chunkhash-contenthash)(用于生成文件名称的占位符)
* tree shaking
* code split(代码分割，将代码分割成多个chunksanh，按需加载)
* 懒加载/预加载
* pwa
webpack和vite区别
| 名称 | 原理 | HMR | 打包 |
|---|---|---|---|
| webpack | 分析整个依赖，多个文件的扫描和转义 | 需要开启 | 将所有资源打包成一个或者多个bundke文件 |
| vite | 浏览器原生ES模块加载当前模块 | 默认开启 | 保持开发时模块化的结构 |
