Vite知识体系|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

前端构建工具的意义

1.模块化方案

1.提供模块加载方案
2.兼容不同模块规范

2.语法转译

1.高级语法转译，如Sass、TypeScript
2.资源加载，如图片、字体、worker

3.产物质量

产物压缩、无用代码删除、语法降级

4.开发效率

热更新

Vite概括

定位：新一代前端构建工具

两大组成部分：

1.No-bundle开发服务，源文件无需打包

2.生产环境基于Rollup的Bundle

核心特征：

1.高性能，dev启动速度和热更新速度非常快

2.简单易用，开发者体验好

• 预编译：npm 包这类基本不会变化的模块，使用 Esbuild 在 「预构建阶段先打包整理好，减少 http 请求数
• 按需编译：用户代码这一类频繁变动的模块，直到被使用时才会执行编译操作
• 客户端强缓存：请求过的模块会被以 http 头 max-age=31536000,immutable 设置为强缓存，如果模块发生变化则用附加的版本 query 使其失效
• 产物优化：相比于 Webpack ，Vite 直接锚定高版本浏览器，不需要在 build 产物中插入过多运行时与模板代码
• 内置更好的分包实现：不需要用户干预，默认启用一系列智能分包规则，尽可能减少模块的重复打包
• 更好的静态资源处理：Vite 尽量避免直接处理静态资源，而是选择遵循 ESM 方式提供服务，例如引入图片 import img from 'xxx.png' 语句，执行后 img 变量只是一个路径字符串。

Vite的使用

为什么进行预打包？

1.避免node_modules过多的文件请求

2.将CommonJS格式转换为ESM格式

实现原理：

1.服务启动前扫描代码中用到的依赖

2.用Esbuild对依赖打麻进行预打包

3.改写import语句，指定依赖为预构建产物路径