Vite开发构建工具在京喜达M站中的实践-京东云开发者社区

### 1 背景
目前我们维护的所有的vue2项目都是使用vue-cli的脚手架工具进行开发，随着项目代码越来越多，项目本地启动速度也随之越来越慢，一定程度上持续影响开发体验和效率。

京喜达M站是vue3的H5项目，故有条件去尝试使用更快的下一代开发构建工具--Vite。

### 2 Vite介绍
Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器：它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的热模块更新（HMR）。
- 一套构建指令：它使用Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。Vite 意在提供开箱即用的配置，同时它的插件API和Javascript API带来了高度的可扩展性，并有完整的类型支持。

### 3 为什么选Vite
当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。大型项目包含数千个模块的情况并不少见。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
- Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，越来越多 JavaScript 工具使用编译型语言编写。
- Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

##### 1）基于打包器的方式：先打包构建整个应用后启动。

![](//img1.jcloudcs.com/developer.jdcloud.com/4494638d-b6e7-46a7-8945-2625c8a6e88720211028135810.png)

##### 2）Vite所使用的方式
以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作。Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

![](//img1.jcloudcs.com/developer.jdcloud.com/99c05b9b-13da-4029-aa51-d5b3836bdaf620211028135833.png)
<center>----摘自《Vite 官方中文文档》</center>

由于现代浏览器基本上都支持了ESM规范，所以在开发阶段并不需要将代码打包，编译成es5模块即可在浏览器上运行。我们只需要从入口文件出发， 在遇到对应的 import 语句时，将对应的模块加载到浏览器中就可以了。因此，这种不需要打包的特性，也是Vite的速度能够如此快速的原因。

### 4 关于Vite2
这实际上是 Vite 的第一个稳定版本。也就是说，Vite 2.0比之前的版本有了很大的改进：

**多框架支持**
Vite 2.0采用了一个更健壮的内部架构从头开始重新设计。现在它完全与框架无关，所有特定于框架的支持都委托给了插件。现在有 Vue、 React、 Preact、 Lit Element 和正在进行的 Svelte 的官方模板

**全新插件机制和 API**
受到 WMR 的启发，新的插件系统扩展了 Rollup 的插件界面，并兼容许多 Rollup 插件。插件可以使用 rollup 兼容的钩子，以及额外的 vite 特定钩子和属性来调整 vite 专用行为(例如区分 dev 和 build 或 HMR 的自定义处理)

**基于 esbuild 的依赖预打包**
因为 Vite 是一个本地的 ESM dev 服务器，使用Pre-Bundling以减少浏览器请求的数量并处理 CommonJS 到 ESM 的转换
在之前，Vite 使用 Rollup 完成这项工作，而在2.0中，它现在使用 esbuild，从而使依赖性预绑定的速度提高了「10-100」倍
作为参考，React Meterial 用户界面以前需要28秒，现在需要约1.5秒

**更好的 CSS 支持**
将 CSS 视为module的First-class，并支持以下开箱即用的功能:
- Resolver enhancement 增强了 CSS 中的路径，以尊重别名和 npm 依赖
- URL rebasing 不管文件从哪里导入，路径都会自动重新设置
- CSS code splitting

**服务端渲染 (SSR) 支持**
Vite 提供了 api，以便在开发过程中有效地在 Node.js 中加载和更新基于 esm 的源代码(就像服务器端 HMR 一样) ，并自动外部化 commonjs 兼容的依赖关系，以提高开发和 SSR 构建速度。生产服务器可以与 Vite 完全解耦
Vite SSR 是作为一个低层次的特性提供的，我们期望看到更高层次的框架在引擎盖下利用它

**旧浏览器支持**
Vite 的目标是默认支持原生 ESM 的现代浏览器，你也可以通过官方的@vitejs/plugin-legacy 选择支持传统的浏览器
这个插件会自动生成现代/旧版两个包，并且基于浏览器/特征提取，提供正确的包，确保在支持它们的现代浏览器中有更高效的代码

### 5 搭建第一个 Vite 项目
Vite中文网：https://cn.vitejs.dev
使用 NPM: npm run @vitejs/app
使用Yarn: yarn create @vitejs/app
然后按照提示操作即可！
还可以通过附加的命令行选项直接指定项目名称和想要使用的模板。
如：
```bash
# npm 6.x
npm init @vitejs/app my-vue-app --template vue-ts

cd my-vue-app
npm install
npm run dev
```
![](//img1.jcloudcs.com/developer.jdcloud.com/98d9dd7f-d04e-497d-a7e7-cc8ffa4307f920211028140115.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/680db7a2-07d7-493e-8021-c9dd074d4c5120211028140122.png)

### 6 现有vue3项目迁移
#### 6.1 使用vue-ts模板建立初始vite工程

![](//img1.jcloudcs.com/developer.jdcloud.com/1150bf6d-6077-4806-a87f-5107d08e857c20211028140138.png)

#### 6.2 安装依赖
先把我们vue3工程中除了vue-cli相关依赖全部拷贝到Vite工程中并安装依赖
npm install --registry=http://registry.m.jd.com

![](//img1.jcloudcs.com/developer.jdcloud.com/5b277607-484b-470b-8d93-49cd70437ef220211028140157.png)

#### 6.3 启动项目
执行npm run dev启动项目，在迁移过程中我们要保持项目可启动，遇到问题及时发现及时解决。

![](//img1.jcloudcs.com/developer.jdcloud.com/83fdd196-efc3-4301-a335-ca0a1c5aeb9920211028140211.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/5ea805ef-f261-4332-8ef0-16d014d0350d20211028140227.png)

准备工作基本完成，空项目可正常启动，接下来就开始迁移代码。
#### 6.4 代码迁移
我们直接把src文件夹、各种配置文件、入口index.html文件拷贝过来
- 全局替换环境变量process.env 改为 import.meta.env 
- 在vite.config.ts中定义全局变量替换方式

![](//img1.jcloudcs.com/developer.jdcloud.com/0b2ba637-7122-4ef1-a87e-91d79ccbe93b20211028140253.png)

.env的配置文件中的 VUE_ 替换为vite可识别的 VITE_

![](//img1.jcloudcs.com/developer.jdcloud.com/f73359c7-b339-4fa3-a631-04067b9039b920211028140312.png)

根据官网介绍，index.html在最外层，作为vite项目的入口文件。

![](//img1.jcloudcs.com/developer.jdcloud.com/e00226d5-6249-4210-b893-e54756c3166020211028140326.png)

项目结构

![](//img1.jcloudcs.com/developer.jdcloud.com/3711b10c-c8fb-41a1-a842-1eb143e3269120211028140339.png)

启动项目

![](//img1.jcloudcs.com/developer.jdcloud.com/e1205dcd-a158-4cf2-92ae-c40b5fcac49a20211028140410.png)

惊喜地发现我们的项目可以正常启动，接口也通了并且显示默认的菜单页面了，迁移第一步成功。

### 7 常见问题
点开各个页面检查

![](//img1.jcloudcs.com/developer.jdcloud.com/8a20376e-6b18-42ac-9a4f-2ca4b8ae364b20211028140428.png)

很好，我们又遇到新的问题了。vite项目中使用scss全局变量报错
**解决办法：在vite.config.ts文件中添加配置，使用addtionalData**

![](//img1.jcloudcs.com/developer.jdcloud.com/83c10639-8439-4f4b-afb2-2cf5f1c618b820211028140619.png)

针对引入的element-plus组件库，按需引入

![](//img1.jcloudcs.com/developer.jdcloud.com/d413d5b8-757e-4243-a2b2-500769402c9820211028140634.png)

```bash
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    })
  ]
})
```

继续查看，发现又出现另一个错误。

![](//img1.jcloudcs.com/developer.jdcloud.com/fe515071-d690-4b7e-a32c-75c7acc6b16020211028140702.png)

在vite2中使用 ESM 作为模块化方案，因此不支持使用 require 方式来导入模块。 require()无法使用，所以我们就不使用require这种方式引入文件，统一改为import：import.meta.globEager
改完后再查看页面，可以正常展示。迁移工作基本完成。后续项目中遇到问题再来对应解决。

其他问题
- 在vite中引入svg iconfont

### 8 项目启动对比
没有对比就没有伤害，使用vite启动项目，比vue-cli启动项目快10倍以上，大大提高了我们的编码体验。

**Vue-CLI启动：**

![](//img1.jcloudcs.com/developer.jdcloud.com/d953071d-a991-41aa-a0bb-4e648825244c20211028140754.png)

**Vite启动：**

![](//img1.jcloudcs.com/developer.jdcloud.com/4b18a384-3b7a-4969-ab59-bb3da375a93620211028140816.png)

### 9 生产环境构建部署

快速的本地启动只是能让我们愉快地进行本地开发调试，当决定迁移以后我们还要考虑vite构建部署是否能满足现有项目的需求，毕竟在这方面vite所提供的构建部署本地开发预构建时使用的是ESBuild，而生产环境构建部署使用的打包工具是Rollup。对此官方解释是虽然 esbuild 快得惊人，并且已经是一个在构建库方面比较出色的工具，但一些针对构建应用的重要功能仍然还在持续开发中 —— 特别是代码分割和 CSS 处理方面。就目前来说，Rollup 在应用打包方面更加成熟和灵活。

这就意味着有可能会造成我们本地与生产环境不一致的行为，需要在测试阶段充分考虑这个影响，以及对浏览器的兼容性问题都是我们要考虑的。

**npm scripts:**

```bash
{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
}
```

**npm run build 构建生产环境包**

![](//img1.jcloudcs.com/developer.jdcloud.com/16a311b5-1bbb-4ac5-b4ea-b111cbdc765220211028140905.png)

根据控制台的报错提示去解决
增大对最小打包模块大小的限制，比如把500k改成1000k
在vite.config.ts文件中的build配置下增加chunkSizeWarningLimit：1000 
再执行vite build --mode prod 不再报警告了。大功告成。

![](//img1.jcloudcs.com/developer.jdcloud.com/dcf7f7a2-d408-4b3a-9313-c6de30e3df9c20211028140926.png)

除了修改模块大小限制还可以分解块，将大块分解成更小的块。

- vue-tsc --noEmit && vite build 针对ts的项目，由于Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查。vue-tsc --noEmit 打开类型检查，对 *.vue 文件和ts的类型做检查。（有可能遇到本地开发没问题但是打包构建时报一堆TS错误的情况，需要慢慢去根据报错信息修改，不断完善符合ts语法的代码。）
- 本地测试应用

本地可以执行完打包命令后使用 npm run preview 预览生产构建产物，在本地测试该应用。

```bash
npm run build
npm run preview
```

至此，迁移工作完成，接下来就是测试环境部署，全面的回归测试以及继续在实践中去验证，遇到新问题再去解决了。

### 10 Vue2项目中使用Vite
在vue2.x 中，也可以使用vite，首先安装Vite，还需要添加支持 vue2.x 的插件。
```bash
npm i -D vite vite-plugin-vue2
```
感兴趣的小伙伴可以参考这篇文章实践一下：<a href="https://blog.csdn.net/qq_41800366/article/details/115030758?utm_term=vite2vue2%E4%BD%BF%E7%94%A8&amp;utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-115030758&amp;spm=3001.4430" target="_blank">vue2项目使用vite进行开发基本流程</a>

### 11 总结

![](//img1.jcloudcs.com/developer.jdcloud.com/a7ac0887-490e-4edb-b7e2-e0c1c49f592820211028141653.png)

针对我们的项目，迁移Vite的步骤以及遇到的问题基本就是这些，整体迁移成本不是很高，而带来的收益十分明显，等习惯了Vite启动的速度就会愈发感觉到Vue-CLI启动速度慢了。

有的文章也会说生产环境还是不敢使用Vite的打包构建，Vite和Vue-CLI混用，本地开发用Vite，生产环境构建还是使用webpack打包。的确Vite还处于频繁更新的阶段，生产环境替换打包工具还是需要谨慎。但我想，看Vite的下载量也这么高了，也有相对稳定的版本，在中小型项目风险可控的范围内去做个尝试，整体迁移成Vite可能代码结构和依赖都更清晰一些，遇到的问题也基本都会找到解决的办法。当然，宗旨还是保证项目稳定的前提下提高我们的开发效率。

![](//img1.jcloudcs.com/developer.jdcloud.com/6739e1f7-e937-4cf2-8bcc-b40180f76dae20211028141807.png)

我们会持续记录遇到的问题，等项目稳定运行一段时间，后续我们可以针对星云给我们提供的M端通用模版去改造Vite的demo方便我们快速去使用Vite上手开发一个新项目。

参考文章：
https://cn.vitejs.dev
https://dev.to/yyx990803/announcing-vite-2-0-2f0a

本文章的不足之处，欢迎各位线上线下交流讨论。

------------
###### 自猿其说Tech-JDL京东物流技术发展部
###### 作者：京喜达技术部 马迪