前端工程化开篇

前端发展史梳理：

最早的html，css，js是前端三剑客，足以实现所有的前端开发任务，但是呢，一个简单的前端交互效果可能就需要一大堆的代码去实现。

后来呢，有了前端库jQuery，他可以使前端的dom操作编写较为简单的代码，提升了前端开发效率。但是随着技术的发展，jquery的弊端逐渐显现。频繁的操作dom使页面性能很差，且jquery不支持原生的模块化开发，无法适应前端发展的需要。

再后来，有了vue，react等前端框架，有了虚拟dom以及diff算法等的加持，使得在提升开发效率的同时，网站的性能也得到了很大的提升。且这些现代框架均支持模块化开发的模式，如commonjs,esmoudle，代码的可维护性也得到了很大的提升。

那么，通过模块化开发编写的代码（不论是es和commonjs），或者是一些.vue文件，或者是sass，less，ts的代码，是怎么在浏览器中执行的呢？

答案是构建工具的出现，类似webpack，vite。以webpack为例，内置loader可以进行代码文件的转换，通过plugin插件可以进行代码压缩，代码分割等一系列性能优化手段。最终将你的源代码全部打包成bundle.js（也可以通过配置将部分静态资源如css，png等单独抽离出来）,这样浏览器只需加载打包后的资源文件即可，大大提升了开发效率和网站性能。

前端工程化理解：

以前认为前端工程化就是webpack，vite这种构建工具。看了一段大模型给出的解释，我这里用自己的话复述一下：前端工程化贯穿开发、测试、构建、部署、维护整个项目开发的流程，目的是提升开发效率，代码质量，促进团队协作。