1.为什么需要构建工具?
1.前端工程的痛点
前端项目的核心要素----资源：JS，TS,JSX,css,scss，LESS，PNG，JPEG,WEBP。前端功能化的的问题越来越明显。
- 模块化:把项目拆分不同的模块，分别进行拆分和维护，分而治之。比较流行的模块化ESM、CommonJs、UMD
- 资源编译：高级语法的编译，在编译的过程中涉及一系列的工具链，因此对于编译工具链的集成也成为了刚需。（简而言之：浏览器的标准赶不上前端开发者的脑洞）
- 产物质量：代码体积、代码性能。对于未使用的代码需要将他们剔除掉，优化产物体积。
- 开发效率：热更新。
2.构建工具的意义
解决前端功能化的问题。
2.Vite概览
Vite定位:新一代前端构建工具
1. 两大组成部分
- 无捆绑开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
核心特征
- 高性能，dev 启动速度和热更新速度非常快!
- 简单易用，开发者体验好
- vite底层基于原生ESM的开发：优势，无需打包项目源代码, 天然的按需加载, 可以利用文件级的浏览器缓存。
3. vite内置的web构建能力
- Vite 开箱即用的功能等价于
webpack,webpack-dev-servercss-loader,style-loader,
less-loader,sass-loader,postcss-loader,file-loader,
MiniCssExtractPluginHTMLWebpackPlugin....
4.Vite的基本使用
- 初始化Vite
npm create vite
2.可以看到如下界面
- 文件讲解
4. 使用
Sass/Scss&CSS Module
npm install sass
5. 生产环境Tree Shaking
优化原理
- 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
5，Vite的整体架构
1.依赖预打包
- 为什么要进行预打包?
- 避免 node modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
- 实现原理：
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
- 预打包实现过程：
在vite的devserve启动前，扫描代码用的依赖，对依赖的代码采用esbuild进行打包，打包完之后，把业务代码中的import语句进行改写。
2. 单文件编译：用Esbuild编译TS/JSX
- 优势: 编译速度提升 10-100倍
- 局限性:
- 不支持类型检查
- 不支持语法降级到 ES5
3. 代码压缩
- Esbuild 作为默认压缩工具，替换传统的 Terser、Uglifyjs 等压缩工具
- 性能对比如下：
4. 插件机制
开发阶段模拟 Rollup 插件机制IV 生产环境直接使用 Rollup
6.Vite学习路线
1.深入双引擎
- esbuild 和rollup.js
参考资料：
- 推荐学习顺序
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发。
2. Vite拆件开发
- 为什么需要插件机制?
- 抽离核心逻辑
- 易于拓展
- vite 插件的钩子 hooks：你可以在对于的钩子处调用它实现不同的功能
- 插件开发流程
3. 代码拆包
- vite 之前的打包一般代码都在一个文件里，无法进行并发求请，缓存利用率低，修改任何文件，都需要重新打包。
- 拆包就是就是把核心代码分成多个包，如果一个包修改了，其他包不受影响，学习 rollup 的代码分割，vite 就是基于 rollup 的代码分割的
3. js编译工具Babel
-
js 的语法标准繁多，但是浏览器支持不一致，但是开始想要使用高级的语法，babel 就是把高级代码进行降低的工具。 原理可以查看官网文档
-
babel 也可以配置插件，你也可以自己编写其插件，你可以查看这个手册来学习。 参考资料
-
语法安全降级
如何在构建产物中避免这类问题?
- 上层解决方案: @viteis/plugin-legacy
- 底层原理
- 借助 Babel 进行语法自动降级
- 提前注入 Polyfill 实现，如 core-is、regenerator-runtime
4. SSR
- 这是一种常见的渲染模式，用于优化提升首屏幕的性能。vite提供了 vite-ssr 项目打包渲染的方案 ，可以查看官方文档
