Vite--新一代前端开发与构建工具

Vite的初衷?为什么要选择它?

  1. 在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制,让开发者以模块化的方式进行开发。
  2. 性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间才能启动开发服务器
  3. 影响开发者的开发效率

1. 新一代前端开发与构建工具;

// 兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

2. 特点:

(1)极速启动
(2)动态模块热重载(HMR)
(3)支持ts和js
(4)可选“多页应用”或“库”
(5)模式的预配置Rollup构建
(6)丰富通用的插件
(7)灵活的api和完整的ts.

3.启动

(传统打包器):在提供服务前,急切的抓取和构建整个应用。
(Vite):将应用中的模块区分为依赖和源码两类。

依赖:使用esbuild预构建依赖(比js编写的打包器预构建依赖快10-100倍)
源码:以原生ESM方式(实际是让浏览器接管了打包程序的部分工作),在浏览器请求源码时进行转换并按需提供

4. 搭建Vite项目:
  1. npm create vite-app //创建
  2. cd vite-app //进入
  3. npm run dev //启动
  4. npm run build //打包
    5.npm run serve //本地预览
5. Vite项目目录的改动:

(1)index.html 在项目最外层(不是在 public 文件夹内)

6. CSS 预处理器

npm install -D sass
npm install -D less
npm install -D stylus

7.功能
1.NPM 依赖解析和预构建
  import { someMethod } from 'my-dep'
2.模块热重载
3.TypeScript

Vite 天然支持引入 .ts 文件。

4.Vite 为 Vue 提供第一优先级支持:

Vue 3 单文件组件支持:@vitejs/plugin-vue
Vue 3 JSX 支持:@vitejs/plugin-vue-jsx
Vue 2 支持:underfin/vite-plugin-vue2

8. 依赖预构建的目的:

(1)commonJS和UMD兼容性
(2)性能:Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块,以提高后续页面加载性能

9. 缓存(Vite 会将预构建的依赖缓存到 node_modules/.vite)

(文件)
(1)package.json 中的 dependencies 列表
(2)包管理器的 lockfile,例如 package-lock.json, yarn.lock,或者 pnpm-lock.yaml
(3)可能在 vite.config.js 相关字段中配置过的
只有当上面的一个步骤发生变化时,才需要重新运行预构建步骤
如果出于某些原因,想要强制 Vite 重新绑定依赖,可以用 --force 命令行选项启动开发服务器,或者手动删除 node_modules/.vite 目录

(浏览器):解析后的依赖请求会以 HTTP 头 max-age=31536000,immutable 强缓存 一旦被缓存,这些请求将永远不会再到达开发服务器。
如果安装了不同的版本(这反映在包管理器的 lockfile 中),则附加的版本 query 会自动使它们失效
(1)通过浏览器 devtools 的 Network 选项卡暂时禁用缓存;
(2)重启 Vite dev server,使用 --force 标志重新打包依赖;
(3)重新载入页面

10. 环境变量与模式

import.meta.env.MODE: string 应用运行基于的 模式。
import.meta.env.BASE_URL: string 应用正被部署在的 base URL。它由 base 配置项 决定。
import.meta.env.PROD: boolean 应用是否运行在生产环境
import.meta.env.DEV: boolean 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)

11. 模式

开发服务器 (serve 命令) 运行在 development (开发)模式,而 build 命令运行在 production (生产)模式

“staging” 模式,它应该具有类似于生产的行为,但环境变量与生产环境略有不同 执行(vite build --mode staging)
为了使应用实现预期行为,我们还需要一个 .env.staging 文件:
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

12. 构建应用:

npm run build
npm run preview
preview 命令会启动一个本地静态 Web 服务器,将 dist 文件夹运行在 http://localhost:5000 上
{
“scripts”: {
“preview”: “vite preview --port 8080”
}
}

13.参考官网地址

https://vitejs.cn/

你可能感兴趣的:(Vite,前端)