vue首页加载那么慢，为什么还成为了主流框架？

恰恰是因为Vue 首屏慢，才让它成为主流框架。

首先，需要讲清楚三件事：为什么慢、为什么大家还在用以及怎么让它不那么慢。

看完你能搞懂 SPA、vendors 打包，以后自己项目也知道从哪优化。

其实这过程就跟做菜似的，首页加载就像搭建一个厨房，而厨房搭建好后，锅碗瓢盆调料这些用具就全了。

而这只需要一次搭建，做菜就变得又方便又快，不需要重复准备锅碗瓢盆用料等。

一、chunk-vendors.js怎么会有2m这么大？

正如上面说的，做菜需要一系列工具，页面初次打开，先要下载所有基础工具包。

这些包一般是

1）框架核心 就是vue

2）路由跳转 vue router

3）状态管理 就是vuex和pinia

4）ui组件库

5）工具库 axios等

而webpack/vue cli打包时会把这些第三方依赖都打进chunk-vendors.js， 这样我们第一次打开才会去把Vue + 全家桶 + UI 库 + 各种依赖 都加载出来，而这些加起来达到2m就不足为怪了。

这跟我们平时用app类似 ，第一次打开肯定要先把运行环境、聊天模块、支付模块、媒体模块等等都下载下来，而只需要下一次，后面就不用重复下了。

注：这里的cli是指用命令创建vue项目工具，而我们用AI编程工具那说的CLI指的是在终端里用命令操作电脑，都是cli ，只是干的活不一样。

**

二、为什么首屏5秒，还有这么多人用

**

1、vue是单页应用（SPA），第一次慢，后面快

正如第一部分说的，vue就跟做菜一样，厨房工具准备齐全了，做第2～n道菜，速度都是差不多的，都很快，因为不用重复准备各种厨房用具了。

所以，用户在vue开发的系统里，点第n次菜单、切第n个页面、填第n个表单，几乎都是秒开的，就第一次加载应用时会慢点。

我们用个数学式子算一下对比下就知道了

比如加载工具5s，点菜单1s，切页面1s，填表单1s。

A：每次都加载工具包 填50次表单 就需要加载50次工具包 505s+501s=300秒

B：每次只加载一次所有工具包 填50次表单 就需要加载一次工具包 5s + 50*1s=55秒

显而易见，对比下来，两组数据差了一个数量级。

所以vue适用于：后台管理系统、电商后台、企业内网、不需要频繁交互的ap

但不适合追求seo的网站（现在有ssr了），还有纯展示的、进来看一眼就走的网页

2、跟其他语言对比

相对于react跟angular，vue有更庞大的中文社区，且react的bundle问题（bundle就是react项目打包后的产物），angular则更大更重，大公司爱用。

但不同的场景还是需要合适的语言去开发、去解决，不要局限于一个语言，尤其现在的AI编程时代，学会多门语言已经不是难事。

三、那为什么vue能成为主流？其实不止于快

**

1、开发效率高

就拿我们程序员来说，学过vue的都知道，一方面是组件化，比如按钮、navbar、筛选器这些组件，写一次，就能全局复用，非常方便，极大提升开发效率，并且这也间接降低了维护成本、阅读理解成本，代码也会非常简洁。

尤其是现在AI编程时代，更需要可维护性高的代码，这样AI用的放心，代码看的舒心。

另一方面就是改数据 ，改一份数据，页面自动更新，古早时，是通过dom树一个数据一个数据改

// 你要自己找到元素，自己改
document.getElementById('count').innerText = '4';
document.getElementById('total').innerText = '399';
// 还要自己插入新的一行商品

而vue开发时，只需要维护一份数据

data: { count: 3, total: 299 }

页面上写

<p>数量：{{ count }}</p>
<p>总价：{{ total }}</p>

下面这个是不是看着就很爽 很方便，当然用AI开发更方便！

最后从公司角度，招人会变得容易，成本也降低了，良性循环，如此往复圈子就越来越流行了。

2、有更多用户场景需要这种技术支持

你看现在的拼夕夕等电商app，用户都是要进来待一段时间的，不是看一下就走，那么vue的这种技术方案就带来了很好的用户体验，每次功能使用耗时都很短。

3、首屏慢的解决方案

加载慢其实是 Vue CLI + Webpack 方案的通病，解决方案如下

1）路由懒加载 就是不是一次都全部准备好，用到哪个模块再进行下载，比如需要ui组件时再下载。

2）splitChunks（拆包），就是把vendors拆成多个小文件，能缓存就缓存

3）CDN， 从离你近的节点下载工具，这很常见

4）压缩 gzip

5）vite构建 体积更小 打包更快

6）SSR/Nuxt 服务器先渲染好网页，用户先看到内容，然后js再加载

7）动态引入ui组件 比如只需要button这个 那么只引入button，而不是全部ui包

所以vue也可以快，只要打包方式优化足够到位

四 总结

一、chunk-vendors.js怎么会有2m这么大？初始加载所有工具包

二、为什么首屏5秒，还有这么多人用，

1、vue是单页应用（SPA），第一次慢，后面快，对比发现很划算

2、跟其他语言对比，vue的优缺点

三、那为什么vue能成为主流？其实不止于快

1、开发效率高

2、有更多用户场景需要这种技术支持

3、首屏慢的解决方案