这是我参与「第五届青训营」伴学笔记创作活动的第21天
为什么需要构建工具
- 模块化:ESM、CommonJS、UMD
- 资源编译:高级语法的编译
- 产物质量:代码体积、代码性能
- 开发效率:热更新
模块化方案
- 提供模块加载方案
- 兼容不同模块方案
语法转译
- 高级语法转译
- 资源加载
产物质量
- 产物压缩,无用代码删除,语法降级
开发效率 -热更新
Vite 是什么？Why Vite
定位: 新一代前端构建工具 两大组成部分:
-
- No-bundle 开发服务，源文件无需打包
-
- 生产环境基于 Rollup 的 Bundler 核心特征
-
- 高性能，dev 启动速度和热更新速度非常快！
-
- 简单易用，开发者体验好
内置的 Web 构建能力
Vite 开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- file-loader
- MiniCssExtractPlugin
- sass-loader
- postcss-loader
- HTMLWebpackPlugin
Vite 上手使用
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源:除了常见的图片格式，Vite 也内置了对于 JSON、Worker、WASM 资源的加载支持
- 使用 HMR
- 生产环境 Tree Shaking
优化原理：
- 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking 在 Vite 中无需配置，默认开启
Vite 给你最直观的印象如何？
• 响应迅速 • 开箱即用
Vite 整体架构
为什么要进行预打包？
- 避免 node_modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式 实现原理:
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
用 Esbuild 编译 TS/JSX 优势: 编译速度提升 10-100
局限性: 不支持类型检查 不支持语法降级到 ES5
Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等 压缩工具
开发阶段 -> 模拟 Rollup 插件机制
生产环境 -> 直接使用 Rollup
Vite 进阶路线
为什么需要插件机制？ • 抽离核心逻辑 • 易于拓展
