这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
前端工程的痛点
模块化、资源编译、产物质量、开发效率
前端构建工具的意义
模块化方案：提供模块加载的方案；兼容不同模块规范
语法转译：高级语法转译；资源加载
产物质量：产物压缩、无用代码删除、语法降级
开发效率：热更新
Vite
定位是新一代前端构建工具
由No-bundle开发服务，源文件无需打包；生产环境基于Rollup的Bundler两大部分组成
核心特征是高性能，dev启动速度和热更新速度非常快；简单易用，开发者体验好
浏览器原生ESM支持
两大要素是script标签增加type="module"属性和使用ESM模块导入导出语法
基于原生ESM1开发服务优势
无需打包项目源代码、天然的按需加载、可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild是预计Golang开发的前端工具，具备以下能力：打包器、编译器、压缩器。性能极高，在Vite中被深度使用
依赖预打包
避免node_modules过多的文件请求；将CommonJS格式转换为ESM格式。 实现原理：服务启动前扫描代码中用到的依赖；用Esbuild对依赖代码进行预打包；改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX的优势为编译速度提升10-100倍，但是不支持类型检查和语法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
插件机制
开发阶段模拟Rollup插件机制；生产环境直接使用Rollup
为什么需要插件机制
抽离核心逻辑、易于扩展
Vite插件开发
服务器启动阶段、请求响应阶段、热更新阶段、服务关闭阶段
