这是我参与「第四届青训营 」笔记创作活动的第4天

构建工具

前端组成主要由逻辑代码、样式代码、 静态资源三个部分组成。开发过程中经常会遇到模块化、语法转译、产物质量和开发效率这四个方面上的问题。

问题	意义
模块化方案	1、提供模块加载方案 2、兼容不同模块规范
语法转议	1、高级语法转译，如SASS、TS 2、资源加载，如图片、字体、worker
产物质量	1、产物压缩 2、无用代码剔除 3、语法降级
开发效率	热更新

vite就很好的解决了以上问题。

vite概要介绍

定位

vite在官网中的介绍就是下一代的开发与构建工具，具有以下特点

组成部分

核心特征

现有打包模块

当下模块打包时通常具有启动缓慢和热更新缓慢的问题，这是bundle带来的性能开销（开发阶段的打包）和JavaScript语言的性能瓶颈（解释性单线程语言，难以性能优化）。因此，当前行业发展的趋势是浏览器对于原生EMS的支持以及基于原生语言（Go、Rust）编写的前端编译工具链。

整体架构

关键技术

开发环节Development

预打包：

生产环节Production

代码压缩

插件

机制： 单文件编译：

进阶路线

深入双引擎

插件开发

插件具有抽离核心逻辑和易于拓展的特点。

hook

代码分隔（拆包）

JS编译工具

Babel：

语法安全降级

服务端渲染

基本流程：