这是我参与「第五届青训营 」笔记创作活动的第12天。
本堂课重点内容
本堂课从构建工具，Vite概要，Vite实战，整体架构和Vite进阶五方面来对Vite的使用进行了入门。
详细知识点介绍
构建工具
前端工程的核心要素：资源
- 模块化
- 在JS中，没有统一的模块化规范，但有ESM、CommonJS、UMD等模块化规范。
- 资源编译
- 对高级远方的编译
- 产物质量
- 对代码体积、代码性能、兼容性相关的要求
- 开发效率
- 热更新
Vite
定位：新一代前端构建工具。
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
当下构建工具存在的问题：
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈：
- bundle带来的性能开销
- JS语言的性能瓶颈
浏览器原生ESM支持：
- script标签添加
type="module"属性 - 使用ESM模块导入导出语法
基于Esbuild的编译性能优化：
内置的web构建能力：
Vite具有强大的开箱即用功能，等价于：
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HHTMLWebpackPlugin
Vite实战
命令：
- dev：在开发阶段启动server
- build：在生产环境进行项目打包
- proview：预览生产模式产物内容
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持。
CommenJS格式不能做到Tree Shaking，require的部分可能依赖运行时计算的结果。
整体架构
关键技术：依赖预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译的优势：编译速度提升极快 局限性：不支持类型检查，不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具。
关键技术：插件机制
开发阶段：模拟Rollup插件机制
生产环境：直接使用Rollup
Vite进阶
深入esbuild和rollup.js双引擎
开发Vite插件
