webpack优化大全！从小白到高手！

前端

2024-01-16 08:48:54

webpack常用的一些优化

用webpack写项目的时候，如何对项目进行优化呢？在开发中我们通常可以通过以下手段进行优化：

###开发环境优化：
- resolve.modules：
  - 告诉webpack在哪个文件夹下面去找第三方模块，避免了层层的查找。
- resolve.alias：
  - 对一些第三方比较大的库，指定其文件夹位置，可以加快其加载速度。
###生产环境优化：
- tree shaking：
  - tree shaking 是指在打包代码时，将没有用到的代码从最终打包的文件中移除。
  - tree shaking 主要针对的是模块化代码。在模块化代码中，每个模块都应该只包含该模块本身需要用到的代码，而不需要包含其他模块用到的代码。
  - 在 webpack 中，tree shaking 是通过代码分析来实现的。webpack 会分析代码中的 import 语句，并根据 import 语句来确定哪些代码是需要用到的，哪些代码是不需要用到的。
  - 需要注意的是，tree shaking 只支持 ES2015 模块化代码。如果项目中使用的是 CommonJS 模块化代码，则需要使用 Babel 插件来实现 tree shaking。
- code splitting：
  - 代码分割是指将代码分成多个块，然后在需要的时候再加载这些块。
  - 代码分割可以提高页面的加载速度，因为它可以减少初始加载时需要加载的代码量。
  - 在 webpack 中，代码分割可以通过 webpack.optimize.splitChunks 插件来实现。该插件可以根据代码的依赖关系将代码分成多个块，然后在需要的时候再加载这些块。
- minification：
  - 压缩是将代码中的注释、空行和不必要的空格等去除，以减小代码的大小。
  - 压缩可以提高代码的加载速度，因为它可以减少代码的文件大小。
  - 在 webpack 中，压缩可以通过 webpack.optimization.minimize 插件来实现。该插件会使用 UglifyJS 压缩器来压缩代码。
优化指南：
- 启用生产模式：
  - 在 webpack 配置文件中设置 mode 为 production。
  - 这将启用 webpack 的生产优化，例如 tree shaking、code splitting 和 minification。
- 使用 webpack bundle analyzer：
  - webpack bundle analyzer 可以帮助你分析 webpack 的打包结果，找出哪些模块和代码占用了最多的空间。
  - 这可以帮助你找到可以进一步优化的地方。
- 使用代码压缩工具：
  - 代码压缩工具可以帮助你进一步压缩代码，减小代码的文件大小。
  - 有许多代码压缩工具可供选择，例如 UglifyJS、Terser 和 Brotli。
- CDN：
  - CDN(内容分发网络)可以帮助你加速网站的加载速度。
  - CDN 将你的网站的静态文件存储在多个服务器上，当用户访问你的网站时，这些文件将从离用户最近的服务器加载。