轻量级工具Vite到底牛在哪——一文全知道
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文参考:https://www.sitepoint.com/vitejs-front-end-build-tool-introduction/
时下大热的vue框架又来了新开发环境构建工具——Vite,今天我们一起来了解一下这个新成员。
背景与工作方式
在过去Webpack、Rollup 等构建工具作为主场明星时,我们的代码都是基于ES Module 规范去写的。一个巨大的依赖图能够通过import 和 export的桥梁在文件之间被完美搭建起来。这些工具在进行本地调试的时候会把模块预先打包成浏览器可读的js bundle格式,为了进行这一过程的优化,就出现了懒加载这种方式,但懒加载并不能解决构建的问题,Webpack依旧需要提前构建异步路由需要的模块。
随着我们的项目逐渐变大,项目启动的速度也会越来越慢。
而Vite则避开了这一点,它顺应时代潮流而产生的,继承了诸多前辈的优点。例如已经基本上将框架编译掉的Svelte或是Snowpack,这些工具能够利用现代JavaScript功能(例如ES模块)来提供更平稳,更快速的开发体验,几乎不需要配置,也不需要依赖于太多已安装软件包。Vite能够直接利用浏览器本机的ES模块进行开发环境搭建,并且直接放弃捆绑步骤,比如直接在 html 文件里写出这样的代码:
// index.html
createApp(Main).mount(’#app’)
无论我们的应用程序大小如何,HMR都能稳定的快速更新。捆绑生产时,Vite附带了一个预配置的构建命令,该命令可以立即进行许多性能优化。此外,Vite还能提供热模块替换,这意味着我们在开发过程中,可以在浏览器中看到代码刷新,甚至可以使用它来编译项目的精简版本,并直接用于生产。通过使用它,我们可以快速启动Vue或React项目,而无需再使用Vue CLI或Create React App。高效、快速就是它的代名词。
有趣的事情是:“ Vite”这个名字来自法语单词“ fast”,发音为“ vit”。
首次安装
如果要根据本指南进行操作,需要先在计算机上安装Node的副本。
运行npm init @vitejs/app
之后,我们可以选择一个项目名称和一个模板。选项包括:
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
选择vanilla后会生成一个目录(基于项目名称),其中包含一些文件,包括index.html
,main.js
,style.css
,favicon.svg
,和NPM和Git。在package.json
中只包含vite的依赖和一些脚本来构建并启动开发环境。
之后进入项目文件夹并安装依赖项:
cd vite-project
npm install
然后,我们可以使用启动服务器 npm run dev
并在http:// localhost:3000 /上查看我们的应用程序。此时修改任何项目文件的内容都可以立即被看到。
运行npm run build
,同时将项目编译到一个dist文件夹中,可以在其中找到JavaScript和CSS文件,我们会发现这两个文件似乎都缩小了。
Vite的文档中提到,对于TypeScript文件可以开箱即用。因此,尽管vanilla选项没有专用的TypeScript模板,但我们应该能够将其重命名main.js,为main.tsVite并自动对其进行编译。当我们把文件重命名并添加一些TypeScript特定的语法后,所有文件都可以更好的进行编译。
使用CSS时,有人会将其重命名为CSSstyle.scss
,并添加一些特定于Sass的语法。控制台和网页上均显示以下错误:
运行npm install sass --save-dev并重新启动观察程序后,就可以使用Sass满足我们的需求了。
通常,我们会事先考虑一下堆栈安装所需的依赖项,这需要花费大量的时间进行配置,使某些工具可以更好配合我们的工作。所以在使用Vite时也优先考虑堆栈。
在实际使用中Vite令人惊叹,我们可以在一两分钟内就建立一个非常高级的堆栈,并且能够轻松完成从JavaScript到TypeScript的转换以及从CSS到Sass的转换。鉴于Vite使用anindex.html作为切入点并构建为纯HTML,CSS和JavaScript的特性,毫无疑问它是一个是用于静态站点和潜在的Jamstack应用程序的出色工具。
单页申请
接着我们来设置一个单页应用程序,试试Vue
运行npm init @vitejs/app
并选择Vue模板后,可以获得Vite,Vue和一个来编译Vue的Vite插件。如果要构建SPA,则可能要处理路由,继续安装Vue Router。
我们在项目中得到了简单的Vue设置,并插入Vue的内容。安装vue-router并配置Vue之后即可工作。调整Vite的汇总配置之后,我们可以使用Vite创建多个页面,如文档中的多页应用。
通过在社区中提供的插件vite-plugin-vue-router
,我们可以像使用Nuxt一样,基于文件路径生成路由器。
Vite本质上是针对各自库和复杂Web应用程序的,进行了优化的Web应用程序框架。以后一定会出现为Vite创建Vue + Vue路由器+ Vuex模板的形式,我们预感这会比Nuxt更好。不仅如此,对于React和Next.js,Svelte和Sapper / SvelteKit也是如此。
如果没有经过测试的Web应用程序框架可以选择所需的语言,Vite绝对是最优选择。
与其他后端集成
一般来说,不在Jamstack的代码库上的工作,基本都使用.NET或PHP作为后端。此时我们仍然可以使用Vite来优化JavaScript和CSS包,Vite具有专门针对此内容的后端集成内容(https://vitejs.dev/guide/backend-integration.html)。
按照说明进行操作之后,Vite会产生一个清单文件,其中包含有关所有产生的捆绑软件的信息。并可以读取此文件的CSS和JavaScript捆绑包,生成<link>
和<script>
标签。所有import都捆绑到中main.js,而所有动态import import('path/to/file.js')
都单独捆绑。
表现
为什么选择Vite(https://vitejs.dev/guide/why.html)?
经过一些测试,给人留下了深刻的印象是Vite开发服务器可立即启动,并且通过替换热模块,每一次代码更改都会快速反映在浏览器中,有时甚至是即时显示。
在这里,测试者尝试导入了一个100kB的JavaScript库,并添加了2万行CSS,将文件类型更改为TypeScript和Sass,强制Vite分别使用TypeScript和Sass编译器进行编译。尽管会有一些延迟,但结果仍然远超预期。
开发人员经验
在以往的开发经验中,无论我们使用的是Grunt,Gulp,Rollup还是Webpack,这种大型复杂的项目都会花费不短的时间来调试并确保所有工具和插件都能正常运行。之后还会花更多的时间在修复错误上,改善捆绑软件能够优化并缩短其构建时间。
相比之下,Vite能轻而易举地做到。测试者尝试设置了四个堆栈,并且几乎立即对其进行了一些自定义设置。Vite消除了两个工具和插件的捆绑,并新增了很多友好的默认设置,甚至可以跳过配置并直接开始工作。
如果我们有特定的需求,Vite允许我们自行设置,可以覆盖Rollup和各种Rollup插件的配置。
项目中绑定的工具越多,整体就会越脆弱。如果一个组件发生故障或引入了重大更改,则整个流程将中断,我们必须再次深入研究每个工具和插件及其复杂性,以对其进行修复,Vite从根本上减轻了开发的负担。
总结
总而言之,Vite是对最近简化工具(如Parcel和Snowpack)趋势的补充。它精简的设置几乎就是外挂。
如果我们要使用前端框架,我们可能会选择Nuxt,Next.js,SvelteKit / Sapper或类似的产品。这些工具不仅简化了工具并加快了开发速度,而且还添加了许多复杂应用程序可能需要的插件,非常方便易用。
而如果我们要避免使用框架,但又需要缩小脚本和样式,Vite将会成为首选工具。
轻量级工具Vite到底牛在哪——一文全知道的更多相关文章
- 苹果iPhone X上搭载的那颗A11仿生芯片,到底牛在哪?
苹果iPhone X上搭载的那颗A11仿生芯片,到底牛在哪? 上周,苹果公司在刚刚落成投入使用的“飞船”新总部(Apple Park)举行2017年秋季新品发布会,整场发布会基本被iPhone X抢尽 ...
- 不推荐别的了,IDEA 自带的数据库工具就很牛逼!
MySQL 等数据库客户端软件市面上非常多了,别的栈长就不介绍了, 其实 IntelliJ IDEA 自带的数据库工具就很牛逼,不信你继续往下看. 本文以 IntelliJ IDEA/ Mac 版本作 ...
- [.NET] [.net 脱壳工具]Sixxpack 最新脱壳机 通杀Sixxpack全版本by -=Msdn5 君临=
[.net 脱壳工具]Sixxpack 最新脱壳机 通杀Sixxpack全版本by -=Msdn5 君临=- 识别方法: 如果无法调戏,请上传附件艾特我.............发帖不易啊..身处大西 ...
- 运维自动化轻量级工具pssh
1pssh介绍 pssh是python写的可以并发在多台机器上批量执行命令的工具,它的用法可以媲美ansible的一些简单用法,执行起来速度比ansible快它支持文件并行复制,远程命令执行,杀掉远程 ...
- 轻量级工具网站SimpleTools
[解释]本来这篇文章是在前天发出来的,可是当时是刚申请的域名,现在都要域名实名认证,导致我发的项目网址打不开,惹来了很多博友的吐槽,在此说声抱歉,今天一大早就把实名认证提交了,现在网站已经可以正常访问 ...
- Python和JS实现的Web SSH工具webssh,牛逼
这个工具是使用Python开发,可以从下面地址了解详情. 官网:https://pypi.org/project/webssh/ webssh这个工具可以干啥: 在linux机器上安装python环境 ...
- 初学Python,对于开发工具不是很了解?一文带你选择适合你的开发工具
工欲善其事必先利其器!想要获取更多的开发工具安装包.安装教程,可以加群:725479218, 开发Python用什么工具好呢?其实刚学Python的话,使用IDLE就够了,虽然调试不是特别方便,但是对 ...
- 基于数据库的自动化生成工具,自动生成JavaBean、数据库文档、框架代码等(v5.8.8版)
TableGo v5.8.8版震撼发布,此次版本更新如下: 1.新增两个扩展字段,用于生成自定义模板时使用. 2.自定义模板新增模板目录,可以选择不同分类目录下的模 ...
- 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记(6)- 文语合成实现(pyttsx3, eSpeak1.48.04)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生之文语合成实现. 文语合成是Jays-PySPEECH的核心功能,Jays-PySPEECH借 ...
随机推荐
- logging日志的使用和设置过期自动删除
一.logging的基础使用 1.logging的级别 import logging logging.debug('debug message') # 计算或者工作的细节 logging.info(' ...
- 2018年11月16日SQL Server实验内容(触发器实验)
--注意:先把studentmanager数据库中的所有表用select into命令复制一份, --然后用复制后新表完成下面的实验,同时,对每个触发器都要进行验证. select *into dep ...
- 深入理解Java并发框架AQS系列(三):独占锁(Exclusive Lock)
一.前言 优秀的源码就在那里 经过了前面两章的铺垫,终于要切入正题了,本章也是整个AQS的核心之一 从本章开始,我们要精读AQS源码,在欣赏它的同时也要学会质疑它.当然本文不会带着大家逐行过源码(会有 ...
- [题解] [NOI Online 2021 入门组 T3] 重力球
题目大意 在一个 \(n\times n\) 的矩形中,题目会给出 \(m\) 个障碍物.有两个小球,你可以选定四个方向(上下左右)的其中一个,小球会朝着这四个方向一直滚动,直到遇到障碍物或是矩形的边 ...
- 云计算和AI时代,运维应该如何做好转型?
云计算和AI时代,运维应该如何做好转型? 今天我们来聊一聊,在云计算和AI时代,运维应该如何做好转型?今天的内容可以说是我们前面运维组织架构和协作模式转型的姊妹篇.针对运维转型这个话题,谈谈我的思考和 ...
- JMeter元件作用域实践指南
从一个问题说起 对于以下测试脚本: 为了能调用进入房间接口,需要从考场接口获取考场token.为了调用考场接口,需要从登陆接口获取登陆token.元件说明如下: 学生登录,提取登录${token}传入 ...
- Jenkins 实现Gitlab事件自动触发Jenkins构建及钉钉消息推送
实现Gitlab事件自动触发Jenkins构建及钉钉消息推送 实践环境 GitLab Community Edition 12.6.4 Jenkins 2.284 Post build task 1. ...
- (七)Struts2Action访问Servlet API
第一种方式: Struts2提供了一个ServletActionContext对象可以访问ServletAPI. 例如 HttpServletRequest request=ServletAction ...
- JMeter5.4.1源码IDEA构建&二次开发(实战)
JMeter5.4.1源码IDEA构建&二次开发(实战) 目录 JMeter5.4.1源码IDEA构建&二次开发(实战) 1.下载源码 2.导入IDEA 2.1 先设置Gradle目录 ...
- Tk 的基本概念-组件—Tkinter 教程系列03
Tk 的基本概念-组件-Tkinter 教程系列03 前言 Tk 系列教程: Tkinter教程系列01--引言和安装Tk Tkinter教程系列02--第一个真正的 GUI 程序 通过上一节的程序实 ...