这是我参与「第四届青训营 」笔记创作活动的第12天
前端构建工具的意义
模块化方案
1.提供模块加载方家
2.兼容不同模块规范
语法转译
-
高级语法转译，如 Sass、TypeScript
-
资源加载，如图片、字体、worker
产物质量
产物压缩、无用代码删除
语法降级
开发效率
热更新
Vite是什么？
定位：新一代前端构建工具
两大组成部分：
1.No-bundle 开发服务，源文件无需打包
2.生产环境基手 Rollup 的 Bundller
核心特征
1.高性能，dev 启动速度和热更新速度非常快！
2.简单易用，开发者体验好
基于原生 ESM 的开发服务优势
无需打包项目源代码
天然的按需加载
可以利用文件级的浏览器缓存
Vite给你直观的印象是什么
响应迅速
开箱即用
关键技术：:依赖预打包
为什么要进行预打包？
1.避免nodemodules 过多的文件请求
2.将 CommonJS 格式转换为 ESM 格式
实现原理：
1.服务启动前扫描代码中用到的依赖
2.用Esbuild对依赖代码进行预打包
3.改写 import 语句，指定依赖为预构建产物路径
关键技术：单文件编译
用 Esbuild 编译 TS/SX
优势：编译速度提升 10-100x
局限性：
不支持类型检查
不支持语法降级到 ES5
为什么需要插件机制？
抽离核心逻辑
易于拓展
vite 插件开发
服务启动阶段
请求响应阶段
热更新阶段
服务关闭阶段
JS编译工具
出现的原因：
Javascript 语法标准繁多,浏览器支持程度不一。
开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题？
上层解决方案：@vitejs/plugin-legacy
底层原理
借助 Babel 进行语法自动降级
提前注入 Polyfill 实现，如 core-js、regenerator-runtime
Vite 社区生态
Github 40k+ star (可参考 webpack 61.3 K,rollup 21.8 k),并且目前还在持续维护
官方提供插件：
@vitejs/plugin-vue,提供 vue 3 支持
@vitejs/plugin-vue-jsx,提供 vue 3 Jsx 支持
@vitejs/plugin-react,提供 React 支持
@vitejs/plugin-legacy,提供低版本浏览器降级支持
