从webpack4.0迁移到vite2构建，体验飞一般的开发速度

前言：由于之前重构了后台管理系统，采用 vue-cli + vue3.0 + ant-design-vue + ts 技术框架来开发的。当时页面路由少的时候，热加载编译时还不感觉怎么慢，随着页面路由慢慢的增加，明显感觉代码保存热加载的时间渐渐变长。
当我在网上看到有人使用vite2.0作为构建工具来代替webpack，并且热加载的开发体验能提升了N个级别(据统计能提升80%-90%的时间)，这又让我重新激发出热情，重新又开始折腾起来，走上了改造之路。

一、vite的原理

想必很多朋友会好奇vite是一个什么样的工具呢？它与webpack对比，为啥在页面很多的情况，热加载依然能做到快速的响应呢?我们一起来看看它的原理。
在讲vite的原理的时候，我们一起来回顾下在浏览器不支持ES模块之前，webpack工作的情况。
webpack：首先会通过Entry定义的入口文件，把各种文件依赖关系给解析出来，并把他们转化成浏览器能直接运行的es5的代码。
流程图如下：

然而，在我们页面应用小时（依赖少），确实感觉不到慢。一旦应用越来越大，页面依赖越来越多，需要处理的 JavaScript 代码量也呈指数级增长。此时，相信很多朋友也会遇到过，一个Ctrl + S 保存文件时，热加载需要等到几秒-十几秒不等的时间，让开发体验非常的糟糕。那我们来看看vite是怎么做的。
vite: 而vite从启动服务时，会将应用中的模块区分为两块：“依赖”和“开发时源码”，对应两者的处理也会不同：

依赖：直接采用esbuild(Go 编写的打包器)，来处理依赖关系。（相对于JavaScript编写的打包器构建时的依赖，会快10-100倍）

源码：直接按照当前浏览器请求的uri（路由），来解析对应该路由下的文件。并把它们直接输出ES模块，扔给浏览器直接处理。（真正做到了按需加载）
流程图如下：


通过两者对比，不难发现。vite相对于webpack快主要分为两块：
1、开发时通过esbuild进行预构建相关依赖，来提升构建速度。
2、通过用户请求路由，来解析代码，直接返回浏览器支持的原生ESM代码让它来执行，真正做到了按需编译和加载代码。

二、改成的成本

好了，在清楚原理后。可能还有一些朋友会不知所措，不知道怎么把项目之前的代码，怎么改造成vite来构建。在改造老项目前得分析目前项目的情况：
1、分析之前的老项目有多少源代码依赖，是不直接支持ES module方式引用。（主要评估改造和替换成本和时间）
2、权衡迁移的成本，和收益以及风险性。相对稳定的项目可以按照老的方式来，或者微前端的项目，想要尝试的话，可以按照子模块依次替换。
PS：关于用vite作为前端微服务构建工具，喜欢的朋友可以关注我的下篇文章：vite2.0 + qiankun2.0 来构建微前端，体验飞一般的开发体验。

好了，废话不多说。直接用我之前博客后台管理系统，做为案例。给大家分享一下：

由于之前是采用vue-cli + vue3.0 + ant-design-vue + ts 的架构来开发的，所以改造成本还是挺低的，花了差不多半天时间就做了迁移，还算顺利。

1、在项目根目录下，新建配置文件 vite.config.ts

import type {UserConfig, ConfigEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import {resolve} from 'path'
import styleImport from 'vite-plugin-style-import'
import alioss from 'rollup-plugin-alioss'
import sftpUpload from './sftp/index'
import accessConfig from './access.config'

export default ({command, mode}: ConfigEnv): UserConfig => {
    console.log('mode:', mode)
    const isPord = mode === 'production'
    let baseUrl = '/'
    const plugins = [
        vue(), 
        vueJsx(),
        styleImport({
            libs: [
                {
                    libraryName: 'ant-design-vue',
                    esModule: true,
                    resolveStyle: (name: any) => {
                        return `ant-design-vue/es/${name}/style/index`;
                    }
                }