Vite｜青训营

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 “再也回不去 webpack 了” 。vite 官网首页的描述为：下一代前端开发与构建工具。下面我从自己的理解和所学知识来简单阐述一下此间Vite所包含的特点。

为什么是下一代

在ES6出现之前，我们的代码模块化都是使用的社区规范。例如 node.js 中的 Common JS 规范。它并不是语言官方给出的规范，而是我们的开发者社区提供的规范，只不过用在了 node.js 当中。ES6 出现之后，代码模块化有了语言规范，即 ES-Module，ES-Module 是伴随 ES6 出现的原生js模块化解决方案。模块化方案有很多，基于这些方案的工具也有很多，抛弃社区规范，使用语言规范成为前端模块化开发的趋势。所以，Vite 可以说是“下一代“。

现有的前端构建工具局限性在哪里

模块化打包工具的出现是需要解决以下问题：ES-Module 的浏览器兼容性问题；模块文件过多导致频繁发送网络请求的问题；资源文件模块化问题。我们常见的构建工具：webpack、rollup、parcel 等都着手解决了这些问题。我们常见的构建工具：webpack、rollup、parcel 等都着手解决了这些问题。rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。

Vite 的特点

1.快速的冷启动 2.即时的模块热更新 3.真正的按需编译

vite 开发/生产模式配置

• vite.dev.config.js 开发环境
• vite.prod.config.js 生产环境
• vite.base.config.js 共有环境
• vite.config.js vite运行调用的环境 vite.config.js:

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

const envResolve = {
  build: () => ({ ...viteBaseConfig, ...viteProdConfig }),
  serve: () => ({ ...viteBaseConfig, ...viteDevConfig }),
};

export default defineConfig(({ command }) => {
  console.log(command);
  return envResolve[command]();
});

vite.base.config.js:

import { defineConfig } from "vite"; 
export default defineConfig({ optimizeDeps: { exclude: [], }, });

vite.dev.config.js:

import { defineConfig } from "vite"; 
export default defineConfig({});