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 只加载库的部分功能，而不是整个库。

2. 加快打包速度

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

• 缓存（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），仅更新修改的部分，而不是重新加载整个页面，提升开发效率。

总结

• 减少打包体积：主要关注如何减小生成的文件大小，减少网络传输时间，提升应用加载性能。

• 加快打包速度：主要关注如何优化构建过程，提高开发时的构建效率，缩短构建和重构的时间。

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