本文的所有前端性能优化，都是基于 webpack 的配置优化实现的。其他前端打包器配置可能有所不同，但是其中的优化方向以及优化思路都是一致的，值得学习了解一二。

本文主要从开发环境和生产环境两个方面去优化 webpack 配置文件，毕竟这两个环境优化的目的有所不同，开发环境优化的目的是尽可能提升编程时的体验，帮助我们尽快定位 BUG 等等，而生产环境却更在意的是提升生产代码的性能，加快代码编译速度等等。

虽然在本文写作的时候，webpack5 已经发布，但是由于学习的资料是 webpack4.x 版本，所以此处总结的用法也是 webpack4.x 中的配置方法，在 webpack5 中，可能有所不同，但是其中基本的概念还是不变的，故对于初学者来说，本文仍旧值得一读。

如题，在复习计算机考研 408 专业课的过程中，我将产出的代码，笔记以及思维导图等做成了一个开源项目。本项目建立至今一月有余，期间也获得了许多研友的 Stars ⭐️ 支持，非常感谢。这也是我第一次独立建立一个开源项目，建立过程中的体验很奇妙，值得书写一篇文章记录一下。下面先给出项目地址：

🚀 GitHub 地址：https://github.com/KimYangOfCat/CSPostgraduate-408-2021，欢迎各位大佬 Stars 🌟 ～