webpack 的实用最佳实践总结

webpack 的发展和迭代非常快，从最开始的 CLI 命令行工具到现在的 Webpack v5，已经成为我们前端项目构建中的非常重要的一个工具，打包各种资源 (CSS、JS、图片等)、代码模块化，减少 HTTP 请求、代码优化、提升性能，webpack 在这些地方都做得很好。也逐渐形成了很多工程化的最佳实践。本文就分享一些我在项目中常用的一些 webpack 最佳实践。

**一、工程化搭建** 

1. 合理配置项目中的 webpack。设置适合项目的 mode、entry、output、module、plugins、devServer、optimization 等等，这些配置可能让项目运行更加高效、稳定和灵活。
2. 了解webpack的插件和loader。根据项目需求和工程化实践，使用相关的插件和loader，以充分发挥 webpack 的强大功能。
3. 规范代码的书写。主要涉及代码的风格、命名规范、注释规范、目录结构、模块规范等。保持代码整洁和一致，方便开发和维护。

**二、模块化开发** 

1. 组织好代码。使用目录结构来组织代码，例如 src 目录用于存放源代码，dist 目录用于存放构建后的代码，node_modules 目录用于存放依赖包等。
2. 模块化开发。遵循模块化的思想，将代码分成一个个独立的模块，便于代码维护和复用。可以使用模块化工具，如 Webpack、Rollup 等，将代码打包成独立的模块。

**三、资源优化** 

1. 使用 CSS 预处理器。CSS 预处理器可以帮助开发者编写更简洁、更易维护的 CSS 代码。
2. 使用图片压缩工具。图片是前端项目中常见的一种资源，使用图片压缩工具可以减少图片的大小，从而减少 HTTP 请求的数量，提升页面的加载速度。
3. 使用雪碧图。雪碧图是一种将多个小图片合并成一张大图片的技术，可以减少 HTTP 请求的数量，提升页面的加载速度。
4. 使用字体图标。字体图标是一种将图标转换成字体的方式，可以避免使用图片，减少 HTTP 请求的数量，提升页面的加载速度。

**四、性能提升** 

1. 使用代码压缩工具。代码压缩工具可以将代码压缩成更小的体积，从而减少 HTTP 请求的数量，提升页面的加载速度。
2. 使用代码分割。代码分割是一种将代码分成多个块的技术，可以减少初始加载的代码量，从而提升页面的加载速度。
3. 使用延迟加载。延迟加载是一种在需要的时候再加载代码的技术，可以减少初始加载的代码量，从而提升页面的加载速度。

**五、代码拆分** 

1. 按需加载代码。只加载当前页面所需的代码，而不是一次性加载所有代码，从而减少初始加载的代码量，提升页面的加载速度。
2. 使用路由懒加载。路由懒加载是一种按需加载代码的技术，当用户访问某个路由时，再加载该路由的代码，从而减少初始加载的代码量，提升页面的加载速度。

**六、缓存** 

1. 使用浏览器缓存。浏览器缓存可以将一些静态资源缓存到本地，当用户再次访问这些资源时，就可以从本地缓存中加载，从而减少 HTTP 请求的数量，提升页面的加载速度。
2. 使用 CDN。CDN 可以将静态资源缓存到全球各地的服务器上，当用户访问这些资源时，就会从离用户最近的服务器上加载，从而减少延迟，提升页面的加载速度。

**七、热更新** 

1. 使用热更新工具。热更新工具可以帮助开发者在保存代码后自动刷新页面，从而方便开发者调试代码，提升开发效率。