详解Vite的新体验

什么是Vite?(是前端新玩具)

Vite是一个web开发构建工具，它通过本机 ES 模块导入在开发过程中更新代码，达到快速更新的目的。

特点

  • 超快的冷服务器启动
  • 即时的模块更新
  • 真正的按需编译
  • 更小的打包体积

开始使用

Vue用户注意：Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库。

安装

npm init vite-app <项目名称>
cd <项目名称>
npm install
npm run dev
## 执行完以上命令，就意味着你的vue3.0项目已经用上了vite了

vite和webpack体验上有什么不同？

就vite目前给我的感觉，就是一个字，快。

  • 初次启动调试服务的时候比webpack快了一倍。
  • 打包的速度也快了一倍以上。
  • 打包出来的文件的体积也是原来webpack的一半体积不到。

Vite是怎样工作的？

用作者的话来说，就是直接请求.vue文件，让浏览器进行解析

最新版的浏览器是支持直接使用import和export关键字了，也就是浏览器开始原生支持模块功能了，这也是Vite使用到的特性之一。

“说了那么多，不如抓个包看看？”

当然可以！在这里我只修改了HelloWorld.vue文件

然后我再次修改了App.vue文件 （不要在意时间戳不一样，我只是不小心删除了，然后又懒得重来）

到这里，相比对Webpack的Code Splitting实现按需加载的方式，Vite给我确实体验是快速了很多

最后

Vite虽然很爽，但是当前RC 1版本仅适用于Vue3.x，不能使用和Vue3不兼容的库。（速度肯定是比webpack快的，各方面）

到此这篇关于详解Vite的新体验的文章就介绍到这了,更多相关Vite 新体验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

  • 详解Vue3.0 + TypeScript + Vite初体验

    详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • 详解Vite的新体验

    详解Vite的新体验

    什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3

  • 详解vite如何支持cjs方案示例

    详解vite如何支持cjs方案示例

    目录 一.问题 二.解决方案 三.如何处理commonJS 一.问题 vite运行时使用esbuild,基于esm 大部分三方包为UMD规范,输出的是CommonJS的包(比如react.lodash) // react 入口文件 // 只有 CommonJS 格式 if (process.env.NODE_ENV === "production") { module.exports = require("./cjs/react.production.min.js"

  • 详解MySQL8的新特性ROLE

    [MySQL的ROLE解决了什么问题] 假设你是一个职业素养良好的DBA比较同时又比较注重权限管理的话:可能遇到过这样的问题,数据库中有多个开发人员的账号:有一天要建 一个新的schema,如果你希望之前所有的账号都能操作这个schema下的表的话,在mysql-8.0之前你要对第一个账号都单独的赋一次权. mysql-8.0.x所权限抽象了出来用ROLE来表示,当你为ROLE增加新的权限的时候,与这个ROLE关联的所有用户的权限也就一并变化了:针对 上面提到的场景在mysql-8.0.x下只要

  • 详解ES9的新特性之异步遍历Async iteration

    异步遍历 在讲解异步遍历之前,我们先回想一下ES6中的同步遍历. 根据ES6的定义,iteration主要由三部分组成: Iterable 先看下Iterable的定义: interface Iterable { [Symbol.iterator]() : Iterator; } Iterable表示这个对象里面有可遍历的数据,并且需要实现一个可以生成Iterator的工厂方法. Iterator interface Iterator { next() : IteratorResult; } 可

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 详解Servlet3.0新特性（从注解配置到websocket编程）

    详解Servlet3.0新特性（从注解配置到websocket编程）

    Servlet3.0的出现是servlet史上最大的变革,其中的许多新特性大大的简化了web应用的开发,为广大劳苦的程序员减轻了压力,提高了web开发的效率.主要新特性有以下几个: 引入注解配置 支持web模块化开发 程序异步处理 改进文件上传API 非阻塞式IO读取流 Websocket实时通信 一.注解配置 Servlet3.0新规范顺应了时代的潮流,使用注解配置,取代混乱的web.xml全局配置.在这之前我们在创建servlet,filter,listener时,都是在web.xml中配置

  • 详解ECMAScript2019/ES10新属性

    每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读. Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN 简单来说flat

  • 详解c++11新特性之模板的改进

    C++11关于模板有一些细节的改进: 模板的右尖括号 模板的别名 函数模板的默认模板参数 模板的右尖括号 C++11之前是不允许两个右尖括号出现的,会被认为是右移操作符,所以需要中间加个空格进行分割,避免发生编译错误. int main() { std::vector<std::vector<int>> a; // error std::vector<std::vector<int> > b; // ok } 这个我之前都不知道,我开始学编程的时候就已经是C

  • Nginx的完整配置详解及实例代码

    Nginx的完整配置详解 最近公司新项目,由于自己是小白,跟着项目经理对Nginx进行配置,在网上找到一篇相关资料,觉得不错,并可以完成配置,这里记录下, 实例代码: #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;

随机推荐