前端工程化

前端工程化的理解

• “前端工程化”里面的工程指软件工程, 工程化是一种思想，而不是某种技术。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等
• 前端工程化就是为了让前端开发能够自成体系，可以从模块化、组件化、规范化、自动化四个方面思考。
• 模块化：模块化就是把一个大的文件，拆分成多个相互依赖的小文件，按一个个模块来划分，如 js 模块，css 模块，资源模块化
• 组件化：从 ui 拆分下来的每个包含模板（html）+样式（css）+逻辑（js）功能完备的结构单元，我们称之为组件。vue，react,angular
• 规范化：目录结构的制定，编码规范，前后端接口规范，文档规范，组件管理，git 分支管理，commit 描述规范
• 自动化：自动化构建，自动化部署，自动化测试

webpack 和 vite 对比

1. 处理流程
   • Webpack 通过先将整个应用打包，再将打包后代码提供给 dev server
   • Vite 直接将源码交给浏览器，实现 dev server 秒开，浏览器显示页面需要相关模块时，再向 dev server 发起请求，服务器简单处理后，将该模块返回给浏览器，实现真正意义的按需加载
   • webpack 是需要先分析各个模块之间的依赖，然后进行打包，在启动 webpack-dev-server 时，请求服务器，可以直接显示打包结果。但是随着模块增多，就会出现体积过大问题。这时候我们又需要通过分析体积对项目进行优化，例如优化 loader 配置、代码压缩等等。而对于 vite 而言，是先启动服务器，请求模块时在对该模块进行实时编译，并用到了现代浏览器支持的 es-module，所以会自动向依赖的 Module 发出请求。所以他在启动时不需要打包，不用分析模块与模块之间的依赖关系，不用进行编译。使其实现真正意义上的按需加载，对于热更新的时候，vite 只需要让浏览器重新请求该模块，不需要像 webpack 一样全部重新编译一次。所以对于热更新方面，效率更高
2. 缺点
   • webpack 启动速度慢。vite 使用 esbuild 预构建依赖，esbuild 使用 go 语言编写，并且比以 javascript 编写的打包器构建依赖快 10-100 倍。热更新效率低下。webpack 的热更新需要打包构建，而 vite 直接响应。
   • vite 生态较差。webpack 的 loader 和 plugin 已经很成熟，生产环境，vite 使用 rollup 构建，实践较少，可能存在好多问题还未暴漏出来，前端的微服务框架, 对 vite 的支持较少，兼容性，不支持 es-module 的浏览器无法使用