一、vite 到底是干嘛的?

vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具。

vite 是法语中轻快的意思。

vite 的特点:

1、轻快的冷服务启动。vite 是面向现代浏览器的,浏览器支持 ES6 的 imports属性,利用浏览器解析 imports,在服务端按需编译返回,不进行打包。所以运行速度较快。

2、开发中的热更新。监听项目代码,有改动时,会立即重新运行。

3、按需进行编译,不会刷新全部的DOM。vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,只有在当前屏幕实际使用时才会被处理。

vite 对现代的浏览器支持性比较好,传统的浏览器可以通过官方提供的 @vite/plugin-legacy 插件支持。

二、vite 创建 vue 项目

vite 是构建工具的高阶封装,它的内部其实是 Rollup。

vite 是尤雨溪随着vue3正式版一起发布的一个工具,所以 vite 只提供了 vue3 的项目搭建方法,没有 vue2.0 搭建方式。除了能够搭建 vue3 项目之外,还能搭建 vue-ts、react 、react-ts、preact、preact-ts、vanilla、vanilla-ts、lit、svelte。

2.1、手把手教你搭建 vite 项目

打开命令行工具,使用npm命令:

npm init vite@lasted

运行结果,如图:

输入需要创建的项目名“ learn_vite ”,如果不输入,默认是 “ vite-project ” 。

回车进行下一步,需要选择创建项目的类型,如图:

使用上下箭头切换,选择我们最熟悉的 vue ,回车进行下一步。

进行选择是否为 ts? vite 原生支持 ts 。我们直接选择vue。不要 ts。

此时,项目创建完成了,需要进入项目,安装依赖,就可以启动服务了。

根据提示地址,去访问我们刚刚创建的第一个项目。如图所示。

2.2、 vite创建文件目录

创建好项目之后,使用编辑器打开项目,我们可以看到项目结构如图:

学习vite是如何运行项目的,首先从配置文件入手。打开package.json文件,代码如下:

{
"name": "learn_vite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}

找到启动项目的命令,以及打包命令。

三、vite VS webpack

3.1、vite 速度快有多快?

我们创建两个项目,一个使用 vite ,另一个使用 webpack 。创建完成之后,启动服务,对比启动时间,我们就知道 vite 有多快了。

启动服务时,webpack 需要先打包项目,打包之后再启动项目,但是 vite 完全跳过了打包这个概念,服务器随起随用。所以在启动服务时,vite 比 webpack 的速度快多了。

3.2、vite 热更新效率有多高?

一些打包器的开发服务器将构建内容存入内存,这样它们只需要在文件更改时,使模块图的一部分失活,但它也需要整个重新构建并重新载入页面。这样代价很高,重新加载页面会失去应用的当前状态。所以 vite 支持了动态模块热加载(HMR),也就是允许一个模块“热替换”自己,对页面的其他部分没有影响,也就是只替换更新了一部分有改变的元素,所以大大改进了开发体验。

vite 同时还利用 http 头加速整个页面的加载,依赖模块请求会通过 Cache-Control:max-age=31536000,immutable 进行强缓存,再次请求的时候,缓存的内容就不需要再次请求。

3.3、使用语言不同

webpack 使用的是 node.js 去实现的,而 vite 使用的是esbuild预构建依赖。而es build使用Go编写的,比 node.js 编写的打包器预构建依赖快 10-100 倍。

上边说这么多,净夸 vite 有多优秀了,难道 vite 就是这么强大,没有什么缺点吗?

四、vite 局限

vite 与webpack 相比,毕竟出道时间有点短,它的生态还不是不完善。webpack最牛之处就在于 loader 和 plugin 非常丰富。

vite 打包项目时,目前使用的是 Rollup,对 CSS和代码分割不是很友好。

vite 刚兴起不久,生态系统还不够完善,建议大家在创建工作项目的时候还是使用 webpack 。自己的项目可以使用 vite 。

什么,你还使用 webpack?别人都在用 vite 搭建项目了的更多相关文章

  1. 还学不会webpack?看这篇!

    摘要: webpack入门教程. 原文:还学不会webpack?看这篇! 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. Webpack已经流行好久了,但很多同学使用webp ...

  2. Vue-使用webpack+vue-cli搭建项目

    一.准备 安装NodeJs + 安装Webpack + 配置环境变量 技巧使用: 1. npm 淘宝路径配置:npm config set registry=https://registry.npm. ...

  3. 《后端也要懂一点前端系列》使用webpack搭建项目

    今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路.由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js.html.css阶段, ...

  4. webpack 4 :从0配置到项目搭建

    webpack4发布以来,我写项目都是用脚手架,即使再简单的项目,真的是really shame..虽然道听途说了很多 webpack4 的特性,却没有尝试过,因为它给人的感觉就是,em...很难.但 ...

  5. vue-cli+ webpack 搭建项目todolist

    本文接着之前的todolist例子,通过vue-cli + webpack 搭建项目:针对于vue-cli 2.x版本,更高版本找官网https://cli.vuejs.org/guide/insta ...

  6. 使用Vue2+webpack+Es6快速开发一个移动端项目,封装属于自己的jsonpAPI和手势响应式组件

    导语 最近看到不少使用vue制作的音乐播放器,挺好玩的,本来工作中也经常使用Vue,一起交流学习,好的话点个star哦 本项目特点如下 : 1. 原生js封装自己的跨域请求函数,支持promise调用 ...

  7. vue-cli webpack 快速搭建项目

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于web ...

  8. 别人都在用数据分析软件,你还在用excel做数据分析?

    之前听朋友吐槽过,他们是上千人的企业,但做数据分析居然还是靠手动上传数据,而且还是用的excel做的.但其实excel并不是企业做数据分析的好工具. 数据分析是指用适当的统计分析方法对收集来的大量数据 ...

  9. 还在用Excel做数据分析?别人都在用数据分析工具啦!

    "Excel在过去.现在和未来都是一个无比优秀和天才的工具,无数虔诚的信徒将其奉为唯一的法门,而我却并不在其中了." 作为一个数据分析师,Excel是我入门必备的数据分析工具,虽然 ...

随机推荐

  1. Structs2的作用是什么??

    struts2是一种重量级的框架,位于MVC架构中的controller,可以分析出来,它是用于接受页面信息然后通过内部处理,将结果返回. 同时struts2也是一个web层的MVC框架,那么什么是s ...

  2. 剑指offer(一)——二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  3. shp平滑处理

    在做图像数据处理时,经常会有栅格数据转矢量数据的操作,转换后的矢量文件会存在锯齿状边缘,不太美观,因此常常需要对矢量(shp)文件做平滑处理. 1 利用arcgis实现shp的平滑和简化 ArcToo ...

  4. 20210715 noip16

    考场 乍一看 T1 像是二分答案,手玩样例发现可以 \(O(k^2)\) 枚举点对,贪心地更新答案,完了?有点不信,先跳了 T2 的形式有点像逆序对,但没啥想法 T3 的式子完全不知道如何处理,一看就 ...

  5. poll?transport=longpoll&connection...烦人的请求c

    1.问题描述: 最近使用miniui做了一个后台管理系统,打开浏览器调试时,总发现一堆无关的请求,结构大致是:poll?transport=longpoll&connection.....一直 ...

  6. 使用easyui进行上左右布局

    在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架. 1.在页面中引入easyui所需的文件 1 &l ...

  7. File Inclusion(文件包含)

    File Inclusion,意思是文件包含(漏洞),是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(include(),require()和include_ ...

  8. Markdown公式用法大全

    目录 基本语法 两种代码引用方式 插入链接并描述 插入图片 有序列表 无序列表 分割线 表格 如何插入公式 如何输入上下标 如何输入括号和分隔符 如何输入分数 如何输入开方 如何输入省略号 如何输入矢 ...

  9. Linux系列(38) - 源码包安装(2)

    安装前准备 安装C语言编译器"gcc" yum -y install gcc --c 源码包语言编译器 下载源码包 安装注意事项 源代码保存位置:/usr/local/src/ 软 ...

  10. 鸿蒙内核源码分析(编译过程篇) | 简单案例窥视GCC编译全过程 | 百篇博客分析OpenHarmony源码| v57.01

    百篇博客系列篇.本篇为: v57.xx 鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程 | 51.c.h.o 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿蒙 ...