这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
为什么需要Vite体系（构建工具）
前端工程的痛点
- 模块化
- 资源编译
- 产物质量
- 开发效率
意义
- 模块化方案
- 加载模块方案
- 兼容不同模块规范
- 语法转义
- 高级语法如Sass, TS
- 资源加载，如图片，字体，worker
- 产物质量
- 产物压缩，死代码，语法降级
- 开发效率
- 热更新
概要介绍
新一代前端构建工具，高性能简单易用，由两大部分组成：
- 源文件无需打包
- 生产环境基于Rollup的Bundler
等价于webpack的一些东西：
- webpack
- webpack-dev-serveer
- css-loader
- style-loader
- MiniCssExtractPlugin
- ...
对常用web工具进行了封装，内置了一些默认的最佳实现。
上手实战
创建项目可以直接选择常见框架，开箱即用
静态资源可以直接使用
一些工具插件可以直接使用
热加载更快
整体架构
- 依赖预打包
- 提前扫描用到的依赖，避免过多请求node_modules
- 使用Esbuild
- 改写import
- 单文件编译
- 使用Esbuild编译TS/JSX
- 速度提升十倍以上
- 不支持类型检查
- 不支持降级ES5
- 代码压缩
- Esbuild替代传统Terser, Uglify.js等，性能更高
- 插件机制
- 开发环境 -> 模拟Rollup插件机制
- 生产环境 -> 直接使用Rollup
总结：好像就是基于Esbuild实现高性能
进阶路线
- 底层依赖双引擎
- esbuild
- rollup.js
- 先了解基本使用，尝试各种配置
- 再学习插件开发
- 为什么需要插件机制
- 抽离核心逻辑，server抽出来，开放构建相关能力
- 易于拓展
- 插件开发
- 通过给出的一些hook可以在不同构建阶段插入逻辑
- 阿巴阿巴……
- 代码分割（拆包）
- 无法进行并发请求
- 缓存复用率低
- Babel
- 开发者要用高级语法
- js标准多，支持程度不同
- 语法安全降级
- 上层方案：@vitejs/plugin-legacy
- 借助babel，提前注入Polyfill
- SSR
- 似乎不用多说了
- 深入了解底层标准
- CJS
- ESM
- HTTP2.0
