浅谈构建工具
前端需要构造工具是因为前端的核心要素是资源。代码需要模块化；代码需要编译，因此各种编译工具的集成也是必不可少；需要考虑线上产物质量问题，有的需要压缩，以及兼容到安卓、低端浏览器等；还要考虑开发效率，需要有构建工具。
前端构建工具的意义：模块化方案、语法转译、产物质量、开发效率
Vite概要介绍
定位：新一代前端构建工具
两大组成部分：No-bundle开发服务，源文件无需打包；生产环境基于Rollup的Bundler
核心特征：高性能，dev启动速度和热更新速度非常快；简单易用，开发者体验好
当下问题
构建工具webpack和rollup等有缓慢的启动、缓慢的热更新问题。原因：bundle带来性能开销；JS语言的性能瓶颈
两大行业趋势
-
全球浏览器对原生ESM的普遍支持（目前占比92%以上）
-
基于原生语言（Go、Rust）编写前端编译工具链 如Go语言编写的Esbuild、Rust编写的SWC
例如：浏览器原生ESM支持
两大要素：script标签增加 type=“module”属性
使用ESM模块导入导出语法
优势：无需打包项目源代码、天然的按需加载、可以利用文件极的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具，具备如下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
性能极高，在Vite中被深度使用
Vite上手实战
第一步：Vite项目初始化，安装pnpm
在终端输入Vite初始化命令
输入项名称，选择framework，完成初始化
create vite
_ vite-project
Select a framework：react
Select a variant：react-ts
使用cd命令进入项目中
pnpm install安装项目依赖
第二步：使用Sass/Scss&CSS Modules
使用静态资源、HMR（注意可以保留状态）
成产环境Tree Shaking（在Vite中无需配置，默认开启）
优化原理：基于ESM的import/export语句依赖关系，与运行时状态无关；在构建阶段将未使用到的代码进行删除
总结优点：
- 响应迅速
- 开箱即用
Vite整体构架
分为开发阶段和生产阶段
关键技术：单文件编译，用Esbuild编译TS/JSX
优势：编译速度提升
局限性：不支持类型检查，不支持语法降级到ES5
关键技术：压缩代码
Esbuild作为默认压缩工具，替换传统的压缩工具
关键技术：插件机制
开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup
Vite进阶路线
深入双引擎
- esbuild
- rollup
参考资料：Esbuild官方文档 Rollup官方文档
学习顺序：先了解基本使用，动手尝试各项常用配置；然后学习其插件开发
Vite插件开发
为什么需要插件机制？
抽离核心逻辑、利于拓展
代码分割（拆包）
JS编译工具（Babel）
出现的原因：JS语法标准繁多，浏览器支持程度不一；开发者需要用到高级语法
参考资料：babel官方站点 babel插件手册
语法安全降级
以Promise语法为例，IE11没有支持
参考资料：@babel/preset-env文档；Vite官方降级插件文档
服务器渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化
参考资料：Vite-SSR文档、Vite官方ssr-demo项目、使用Vite搭建SSR工程
深入了解底层标准
Vite社区生态
个人总结
Vite优点包括快速冷启动、按需编译、模块热更新、生产环境使用Rollup打包，基于ES Module打包，体积小、开箱即用
。使用Webpack打包的原因：浏览器环境不支持模块化、零散的模块文件会产生大量的HTTP请求。这两个问题现代浏览器和HTTP2.0已经基本解决了。今后我会按照老师建议的学习方法，继续学习Vite相关知识，不断进步。
