Vite初识 | 青训营笔记

Canivores
97 阅读3分钟

Vite初识 | 青训营笔记

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

什么是vite

两大组成部分：

  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler

新一代前端构建工具

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

当下问题

  • 缓慢的启动->项目编译等待成本高
  • 缓慢的热更新->修改代码后不能实时更新

两大行业的趋势

  • 全球浏览器对原生ESM的普遍支持(目前占比 92% 以上)
  • 基于原生语言(Go、Rust)编写前端编译工具链

vite使用

项目初始化

  1. npm i -g pnpm
  2. pnpm create vite（此处可以选择通过哪种框架进行开发）
  3. pnpm install
  4. npm run dev

image.png

启动完成后,打开浏览器访问对应地址即可

使用Sass/Scss & CSS Modules

image.png

使用scss css Modules

image.png

使用静态资源

image.png

生产环境Tree Shaking

优化原理:

  • 基于ESM的import/export语句依赖关系，与运行时状态无关
  • 在构建阶段将未使用到的代码进行删除

Tree Shaking在 Vite中无需配置，默认开启!

整体架构

image.png

学习路线

推荐学习顺序:

  • 先了解基本使用，动手尝试各项常用配置
  • 然后学习其插件开发

参考资料：

深入双引擎

Vite插件开发（抽离逻辑 易于拓展）****

代码分割（拆包）

JS编译工具（Babel）

语法安全降级

服务端渲染（SSR）

深入了解底层标准

参考博客：

avatar
文章
阅读
粉丝