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

  • 编辑时间: 2021-10-17 17:48:28
  • 浏览量: loading...
  • 作者: 段亮

前言:由于之前重构了后台管理系统,采用 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`;
                    }
                }
       

剩余94%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

开通VIP会员

已有2位小伙伴打赏过本篇文章:

Hopeeeee
≯℡__Kan透↙

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!