Vite|青训营笔记

PureNight
70 阅读3分钟

这是我参加[第五届青训营]伴学笔记创作活动的第13天

本堂课程重要知识

  • 了解前端工程的痛点/前端构建工具的意义
  • 了解Vite 概览、业界案例、优势
  • 了解Vite 上手实战与架构解析
  • 了解Vite 进阶路线

前端工程痛点

  • 模块化
    • 虽然已有ESM、CommonJS、UMD的模块化规定，但仍然没有统一
  • 资源编译
    • 浏览器对高级语法的编译赶不上开发者脑洞
  • 产物质量
    • 代码体积、代码性能、兼容性
  • 开发效率
    • 热更新

前端构建工具的意义

image.png

vite概览

image.png 启动时间和更新时间都比rollup和webpack快
传统打包工具的问题 image.png 行业两种趋势

  • 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
    • 两大要素:1.script标签增加type="module"属性2.使用ESM模块导入导出语法
    • =>故vite开发了vite dev server，而基于原生ESM的开发服务优势如下
      • 无需打包项目源代码
      • 天然的按需加载
      • 可以利用文件级的浏览器缓存

image.png

  • 基于原生语言(Go、Rust)编写前端编译工具链兴起，如Go语言编写的Esbuild、Rust编写的SWC
    • eg.基于Esbuild的编译性能优化 image.png

vite内置的web构建能力 image.png 大大减少了配置文件的代码量，降低开发成本和效率 image.png vite特点:响应迅速和开箱即用

vite实战

1.项目初始化

#提前安装pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev
#打开浏览器访问对应地址

image.png

2.使用 Sass/Scss & CSS Modules

样式隔离 image.png

image.png

3.使用静态资源

image.png 除了常见的图片格式,Vite也内置了对于JSON、Worker、WAASM资源的加载支持
可以使用HMR，此处无需额外配置，自动启动，修改代码就可看到样式改变

4.生产环境 Tree Shaking

Tree Shaking也无需额外配置，自动启动

image.png

vite整体架构

image.png

关键技术

单文件编译

对依赖打包的原因:loader module的内容不可控，且产物格式不规划 image.png 最低只能降低ES6

代码压缩

Esbuild作为默认压缩工具,替换传统的Terser、Ualify.is等压缩工具 image.png

插件机制

插件机制需求的原因：抽离核心逻辑，易于扩展 image.png

  • 开发阶段->模拟Rollup插件机制
  • 生产环境->直接使用Rollup

插件兼容性具体可查阅vite-rollup-plugins.patak.dev/
插件钩子 image.png

vite进阶路线

image.png 如何解决 可以通过babel里的preset-env或vite官方降级插件 image.png

image.png

avatar
文章
阅读
粉丝