这是我参与「第四届青训营 」笔记创作活动的第14天
前端工程的痛点
- 模块化
- 资源编译
- 产物质量——>兼容性
- 开发效率
——>前端构建工具
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译 如Sass TS
- 资源加载 如图片、字体、worker
产品质量
- 产物压缩、无用代码删除、语法降级
开发效率
- 热更新
vite的由来
定位
新一代前端构建工具
两大组成部分
-
no-bundle开发服务，源文件无需打包
-
生产环境基于rollup的bundler
核心特征
-
高性能 dev启动速度和热更新速度 ——>响应迅速
-
简单易用，开发者体验好 ——> 开箱即用
当下问题
传统的构建工具
-
缓慢的启动 ——> 项目编译等待成本高
-
缓慢的热更新 ——> 修改代码后不能实时更新
原因 ——>
-
bundle带来的性能开销
-
JavasScript语言的性能瓶颈
两大行业趋势
浏览器原生ESM支持
<script type="module"> //要素一，增加的属性
import {foo} from './fool.js'
console.log(foo)
</script>
export const foo='foo'; //要素二，ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于原生ESM的编译性能优化
Esbuild能力 —— 打包器 编译器 压缩器
内置的web构建能力
使用vite
项目初始化
使用Sass/Scss&CSS Modules
使用静态资源
除了常见的图片格式，vite耶内置了对于JSON、Worker、WASM资源的加载支持
无需额外配置，自动开启HMR、Tree Shaking
vite整体架构
依赖预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
单文件编译 Esbuild
- 不支持类型检查
- 不支持语法降级到ES5
代码压缩
插件机制
- 抽离核心逻辑
- 易于拓展
开发阶段 ——>模拟rollup插件机制
生产环境 ——>直接使用rollup
vite进阶路线
深入双引擎
- esbuild
- rollup.js
插件钩子
插件示例
代码分割（拆包）
JS编译工具——Babel
- js语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
服务端渲染SSR
学习资料：
