Vite 总结

十、Vite 总结

通过前面的学习，我们对 Vite 有了初步的认识。Vite 本质是一个构建工具的高阶封装，他的内部其实使用的是其它的打包工具。最核心的就是esbuild和Rollup打包工具。

• 在开发环境下，由 esbuild 执行依赖预构建工作
• 在生产环境下，由 Rollup 完成打包工作

你可能有一个疑问，esbuild 的打包速度是 rollup 的 10-100 倍，为什么生产环境下不使用 esbuild 来构建呢 ？这个官方文档给出了说明。参考地址：https://cn.vitejs.dev/guide/why.html(opens new window)

以下内容是大家在本章节重点需要掌握的

1、如何搭建 Vite 项目

首先我需要知道，Vite 默认是以根目录下的index.html作为打包的入口文件。

所以在创建 Vite 项目时，一定要在根目录下新建index.html文件。然后还要了解以下 Vite 相关的命令

npm init -y   # 初始化项目的package.json文件
npm i vite -D  # 安装vite
npx vite  # 启动开发服务
npx vite build # 生产环境打包
npx vite preview  #预览打包后的生产环境项目

我也可以在package.json中，配置scripts命令脚本，如下：

"scripts": {
    "dev":"vite",
    "build":"vite build",
    "preview":"vite preview"
}

然后就可以采用以下命令完成对应工作

npm run dev    # 启动开发服务
npm run build   # 执行生产环境打包
npm run preview  #预览生产环境打包后的项目

2、依赖预构建

Vite 将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间

• 依赖模块： 简单理解为在代码中引用的第三方模块。
• 源码模块： 简单理解为，我自己写的那部分代码。

Vite 在开发环境下并不会对源码模块进行打包处理，只会对依赖模块打包，并采用打包极快的 esbuild 完成打包工作。

然后将打包后生成的 JS 文件，保存在当前项目的node_modules/.vite目录下缓存起来，同时对该文件做浏览器强缓存，以提高开发期间页面重新加载的性能。

3、Vite 开发服务启动极快的原因

Vite 之所以能快速的启动服务，主要是做了以下几方面优化

• Vite 以原生 ESM 方式提供源码（源码不打包），让浏览器接管了打包程序的部分工作
• 使用 esbuild 预构建依赖和加快构建速度
• 对预构建的依赖做文件缓存与浏览器缓存
• 启动应用时按需提供代码
• 内置了一套原生 ESM 的模块热替换（HMR）

…

4、如何快速创建 Vite 项目

通过执行以下命令，就可以快速创建一个 Vite 项目

npm create vite@latest

5、Vite 中使用插件

目前主要掌握以下两种插件的作用与配置

• vitejs/plugin-legacy 插件，用来处理 JS 兼容性
• @vitejs/plugin-vue用来解析.vue 结尾的文件

通过这两个插件，我知道在 Vite 中使用插件，分三步

• 下载插件包
• 在配置中通过 import 导入包
• 在配置文件导出对象的plugins选项中配置插件

import legacy from "@vitejs/plugin-legacy";

export default {
  // 插件配置选项，plugins的值是一个数组，其中的第一项代表一个插件
  plugins: [
    // 配置legacy插件
    legacy({
      // 指定转码后的代码需要兼容那些版本的浏览器,
      // 与webpack中`@babel/preset-env`预设中设置了`targets`参数的含义一样
      targets: "Firefox > 23",
    }),
  ],
};

6、Vite 中对静态资源处理

Vite 作为一个开箱即用的前端构建工具，默认支持 JS、CSS、Sass、Less、JSON、图片、HTML 等静态资源的处理。

针对 CSS 文件的处理，有时还需要我做相关配置，所以我重点讲解了 CSS 的以下几个主意点

• Vite 中对 CSS 的默认处理行为
• Vite 支持 CSS 模块化处理
• Vite 支持 CSS 预处理器
• Vite 中如何处理 CSS 兼容性

针对 JSON 可以被直接导入 —— 同样支持具名导入：

// 导入整个对象
import json from "./data.json";

//  对一个根字段使用具名导入 —— 有效帮助 treeshaking！
import { data } from "./data.json";

7、Vite 的常规配置

在我讲解的 Vite 常规配置内容中，我需要重点掌握以下两项配置

• Vite 的代理服务配置
• Vite 中如何配置别名路径

其它几项配置，大家只需要做个了解就可以了