这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
今天讲的是前端工程化的内容
前端构建工具
前端项目由一系列的文件资源构成的，工程化有4个目的
模块化有一些常用的规范，但还是没有统一资源编译高级语法的编译保证产物质量包括代码体积、代码性能、语法兼容性开发效率热更新
前端构建工具应运而生
传统的构建工具启动缓慢、热更新缓慢，导致项目编译等待成本高、修改代码后不能实时更新，会带来开发体验的问题，比如bundle带来的性能开销和JS语言（单线程）的性能瓶颈
针对这些问题，形成了两大行业趋势：
- 全球浏览器对原生ESM的普遍支持
- script标签增加type="module"属性，支持在标签内编写ESM模块的语法
- 基于原生ESM的开发服务优势：无需打包项目源代码，天然的按需加载，可以利用文件级的浏览器缓存（文件失效的时候不会导致整个bundle都失效）
- 基于原生语言编写前端编译工具链， Go语言编写的Esbuild,Rust编写的SWC
- Esbuild是基于Golang开发的前端工具，具备打包器、编译器、压缩器，可以在Vite中可以被使用
Vite
两大组成部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能 dev启动速度和热更新速度非常快
- 简单易用 开发者体验好
Vite的默认集成度很高，对常见的web开发功能都进行了封装
实战部分
初始化+安装常用依赖
首先需要在项目中安装pnpm，然后使用pnpm创建项目（pnpm create vite），创建成功之后安装相关的依赖，然后运行即可
build中的tsc是运行检查
vite内部的依赖非常精简，对于一些比较重的框架安装速度非常快
安装sass
.module.scss结尾的文件一般被当作css module来处理，读取的时候被当作是一串JS字段，使用前先导入，然后，在tag中加入className={...}进行使用，不过需要注意同个项目的组件内不要使用重复的className以防止组件污染，className一般是被用作不同组件的样式隔离。另外，sass支持高级的语法，比如嵌套，可以提高开发的效率
如果需要导入图片的话，先import图片然后直接使用，vite会调取相应的静态资源
除了常见的图片格式，Vite也内置了对于JSON，Worker，WASM资源的加载支持
vite可以保留组件的状态
生产环境Tree Shaking
优化原理基于ESM的import/export语句依赖关系，与运行状态无关（可以静态确定）
将构建阶段将未使用的生产阶段代码进行删除，在Vite中默认开启（基于rollup）
同时，它也不会参与一些动态化的内容，如果强制参与可能会出现风险
Vite响应迅速，开箱即用
Vite框架在开发阶段根据ESbuild完成Pre-bundle，HTTP Server的配置使用Plugin Container完成
在产品阶段使用ESbuild Minify压缩插件的代码体积
Plugin Container同时还和Rollup一起处理Vite的依赖，其中esbuild plugin交给Esbuild Transform完成
