美文网首页
vite和vue-cli 4哪个好?为什么我选择了vite?

vite和vue-cli 4哪个好?为什么我选择了vite?

作者: 不看盛景不叙深情 | 来源:发表于2021-12-11 21:47 被阅读0次

    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社区贡献一份力量.

    相关文章

      网友评论

          本文标题:vite和vue-cli 4哪个好?为什么我选择了vite?

          本文链接:https://www.haomeiwen.com/subject/jeekfrtx.html