这是我参与「第四届青训营」笔记创作活动的的第12天，今天是关于《Vite知识体系》的学习
Vite和webapck的区别
-
vite和webpack都是现代打包工具
-
webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
-
vite直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
-
- 生态不及webpack，加载器、插件不够丰富
Vite
浏览器原生ESM支持
- script标签增加Type="module"
- 使用ESM模块导入导出语法
优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
内置的Web构建能力
vite开箱即用的功能：
- webapck
- webpack-dev-server
- css-loader
- css-loader
- less-loader
- style-loader
- sass=loader
- file-loader
- postcss-loader
...
项目初始化
//安装pnpm
npm i -g pnpm
//初始化命令
pnpm cerate vite
//安装依赖
pnpm install
启动项目
pnpm run dev
-
启动界面
-
package.json
Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
- 默认开启！
例如定义add方法和multi方法
只使用add方法并 pnpm run build
就把没用到的multi删除了
Vite整体架构
依赖预打包
- 避免Node-moduless过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
代码压缩
插件机制
进阶
深入学习双引擎 esbuild与rollup.js
代码分割 拆包
Babel JS编译工具
出现的原因：
- 兼容性
语法安全降级
如何在构建产物中避免这类问题？
- 上层解决方案：
- @vitejs/plugin-legacy
- 底层原理：
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现
