webpack打包优化策略

1. 减少打包体积

减少打包文件的大小是为了提高加载速度，降低网络带宽消耗，提升用户体验。常见的减少打包体积的优化策略包括：

代码分割（Code Splitting）：将代码拆分成多个小文件，让浏览器按需加载。常见方法包括：入口分割、动态导入、异步加载。
**项目分包：**在路由里面使用懒加载，将页面打包成多个包
树摇（Tree Shaking）：去除没有使用的代码，减少无用代码的引入和打包，特别适用于 ES6 模块。
压缩（Minification）：通过压缩 JavaScript、CSS 等资源，去除空格、注释、换行等无用字符，减少文件大小。
- 使用 TerserPlugin 压缩 JS。
- 使用 CssMinimizerPlugin 压缩 CSS。
- 压缩图片，将比较小的图片转为base64
提取公共代码（Code Deduplication）：将多个文件中重复的代码提取到一个单独的文件中，避免重复打包相同的代码。
使用CDN：将比较大的依赖包放到CDN上，通过js引入项目
删除无用资源（Dead Code Elimination） ：使用 PurgeCSS 等工具删除未使用的 CSS 规则。
按需加载第三方库 ：例如，使用 babel-plugin-import 只加载库的部分功能，而不是整个库。

加快打包速度是为了提升开发效率，缩短构建和重构的时间。常见的加速构建的优化策略包括：

缓存（Caching） ：通过使用缓存，避免每次都重新构建相同的内容，减少重复的构建时间。Webpack 提供了内建的构建缓存功能，通过配置 cache 来保存中间结果。
并行构建（Parallelism） ：通过并行化处理多个构建任务来加速构建。例如，parallel-webpack 插件可以启用多个构建进程并行执行。
增加构建并发性 ：使用 thread-loader、happy-pack 等工具来将构建任务分配到多个线程，提升构建效率。
使用 HardSourceWebpackPlugin：通过存储模块构建的中间结果，下次构建时直接复用，从而加快速度。
优化 devtool 配置 ：在开发模式下，选择合适的 source map 类型。通常 eval-source-map 比较快速，但 source-map 会提供更详细的调试信息，适合生产环境。
构建监视（Watch Mode） ：在开发过程中开启 watch 模式，避免每次修改都进行完全重新构建。Webpack 会监听文件变化，仅构建发生变化的部分。
热模块替换（HMR）：通过模块热替换（HMR），仅更新修改的部分，而不是重新加载整个页面，提升开发效率。

这两类优化常常是相辅相成的，在实践中很多优化策略会同时涉及到这两方面的提升。