Vite学习｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 14 天，欢迎各位大佬批评指正。

构建工具

前端工程痛点

- 模块化
    - ESM、CommonJS、 UMD
- 资源编译
    - 高级语法的编译
- 产物质量
    - 代码体积、代码性能
- 开发效率
    - 热更新
- ...

构建工具意义

- 模块化方案
    - 提供模块化加载方案
    - 兼容不同模块规范
- 语法转译
    - 高级语法转译
    - 资源加载
- 产物质量
    - 产物压缩、无用代码删除、语法降级等
- 开发效率
    - 热更新集成

传统构建工具存在问题

• 缓慢的启动

• 缓慢的热更新

上述存在的问题基本存在性能瓶颈在于：bundler带来的性能开销 和 单线程的JS语言天然性能瓶颈。这些问题日益影响开发者的体验。

因此，两大行业的趋势：

• 浏览器对原生ESM的支持（～92%）。

  浏览器支持type='module'的script标签，允许引入模块脚本

  <script type="module">
      import {foo} from './foo.js'
      console.log(foo);
  </script>
  

  ESM导出

  export const foo = 'foo';
  

• 通过原生语言（go、rust）编写的 Esbuild 和 SWC 构建工具。

vite 概要

Vite 是什么

• 定位：新一代前端构建工具。
• 两大组成部分：
  • no-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup和Bundler
• 核心特征
  • 高性能，启动速度和热更新非常快
  • 简单易用，开发者体验好
• 开箱即用（ 无需配置，直接使用 ）
  • webpack
  • webpack-dev-sever
  • css-loader
  • style-loader
  • less-loader
  • sass-loader
  • postcss-loader
  • file-oader
  • HTMLWebpackPlugin
  • ...

Vite 基础使用

• 项目初始化

  • 初始化命令：

  npm create vite
  

  • 安装依赖

  npm i
  

  • 启动项目

  npm run dev
  

  • 目录结构

  src
  |__App.css
  |__App.tsc
  |__assets
  |   |__react.svg
  |__components
  |    |__Header
  |        |__index.module.scss
  |        |__index.tsx
  |__favicon.svg
  |__index.css
  |__logo.svg
  |__main.tsc
  |__vite-env.d.ts
  

• 使用Sass/Scss和CSS模块

  • 安装Sass

  npm i sass -D
  

  • 定义样式

  .header {
      color: red;
  }
  

  • 引入样式

  import style from './index.module.scss';
  export function Header() {
      return <p className={style.header}>This is Header</p>
  }
  

---

CSS modules：实现样式隔离，为了防止组件className一致时产生的样式污染。

• 引入静态资源文件：Vite可以直接引入静态文件资源（内部对文件做了一些转译）。

  • 引入资源

  import reactlogo from './assets/react.svg';
  

  • 使用

  <img src={reactlogo} alt="React" />
  

• 使用HMR：Vite默认开启热更新。

HMR可以保存组件的局部状态。

• 生产环境的Tree Shaking：Vite默认开启。

基于ESM的静态引入依赖关系，与运行时状态无关，可以在构建阶段对无用代码删除。

vite 整体架构

打包机制

node modules是一个不可控的包，格式也不规范，可能使用的是CSM规范，在浏览器不支持。因此Vite会将所有node modules进行预打包：在项目启动之前，扫描代码中用到的依赖，对依赖的代码用Esbuild打包，然后用ESM规范改写。

文件编译

用Esbuild编译TS/JSX。

优势：编译速度特别快。

局限：1. 不支持类型检查，因此需要tsc。2.不支持ES5的语法降级。

代码压缩

利用Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具，性能提升 20倍 以上～

插件机制

• 开发机制：利用Plugin Container来模拟Rollup插件机制。
• 生产环境：直接使用Rollup。