vue2一直使用的都是vue-cli作为官方支持的脚手架工具.vue-cli是基于webpack专门为vue.js提供快速开发的完整系统.
vue3出来以后,同时出现一个专门为vue3提供快速开发的脚手架工具,那就是vite.那很多小伙伴有要问了,既然vue-cli 4和 vite都支持vue3进行快速开发,那应该怎么选呢?今天,我们就从各个角度对比一下,vue-cli4和vite之间的优劣.

1.首先我们先介绍一下vue-cli4有什么特点:

1. 基于 webpack 构建，并预设好一些默认配置.
2. 一个丰富的官方插件集合.而且因为是基于webpack构建,得益于webpack庞大且完善的社区.
3. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。用户可以通过图形界面而不是命令行来配置自己的项目.

所以说vue-cli 4是webpack的超集.那么vue-cli 4是怎么为浏览器提供服务的呢?我们看下面这张图:

bundler.37740380.png

在服务启动之前,要不所有代码打包成Bundle然后启动服务,提供给浏览器使用.这就是vue-cli4 在开发大型项目的时候,服务启动慢的原因.

2.接下来我们看一下vite的特点:

1. 为了解决服务启动慢的问题,vite一开始就将应用分为依赖和源码,Vite 使用 EsBuild预编译依赖,由于Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。使用原生的ES6模块(ESM),来提供源码,这实际上让浏览器承担了一部分打包程序的工作.Vite 只需要在浏览器请求源码时进行转换并按需提供源码,并不需要将源码全部提供.
2. 为了避免每次启动项目时,要重建整个包,Vite 将预构建的依赖缓存到 node_modules/.vite。然后将http请求头设置为Cache-Control: max-age=31536000,immutable来进行强缓存,而源码呢,请求会根据 304 Not Modified 进行协商缓存.
3. vite 在构建上还做了一些优化如:CSS 代码分割,预加载指令生成,异步chunk加载优化.
4. vite 在开发模式下,采用了EsBulid进行依赖编译,来实现优秀的开发体验.在生产模式下,则采用Rollup进行代码打包,虽然Rollup本身并不支持代码分割,但是vite已经通过插件的方式实现了该功能.

那么vite是怎么为浏览器提供服务的呢?我们看下面这张图:

esm.3070012d.png

3.vue-cli 4 和vite的打包对比

通过上面的内容,相信大家对这两个有了一定的了解.接下来我们看一下.在代码打包上vue-cli4和vite的表现(都是选择了less + typescript)

1. 首先我们看一下vue-cli 4 和 vite 初始打包情况

   
   vuecli4初始.png
   vite项目初始.png
2. 接下来我在两个项目中都添加了loadsh,代码如下:

   import { random } from "lodash";

   export default {
      name: "App",
      components: {
         HelloWorld,
      },
      mounted() {
         let test = random(0, 999)
         console.log(test);
      },
   };

打包结果如下:

vuecli4添加lodash.png vite添加lodash.png

vue-cli4 的前后值为98.61kb,170.33,增量为72.06
vite 的前后值分别为52.01kb,124.32kb,增量为72.31kb.

打包的包的大小还相差不大的.

4.总结

从开发和生产来看,vite比vue-cli 4 还是有很大优势的.有人说vite社区不如vue-cli4 大,我觉得吧,对于一般的项目来说,vite社区已经可以满足了.如果是很大那种,或许你也可以自己写插件,为vite社区贡献一份力量.