vite(一)——基本了解和依赖预构建

文章目录

  • 一、什么是构建工具?
    • 1.为什么使用构建工具?
    • 2.构建工具的作用?
    • 3.构建工具怎么用?
  • 二、经典面试题:webpack和vite的区别
    • 1.编译方式不同
    • 2.基础概念不同
    • 3.开发效率不同
    • 4.扩展性不同
    • 5.应用场景不同
    • 6.总结( vite会取代webpack吗?)
  • 三、vite的基本了解
    • 1.vite和vite-cli的区别
    • 2.Rollup 打包代码
      • (1)学习vite了解rollup的原因
      • (2)使用rollup打包 ES 模块的原因
      • (3) ES6 模块与 CommonJS 模块的差异
      • (4) 为什么说vite只支持浏览器原生 ES imports 的局限
    • 3.vite的依赖预构建
      • (1)过程
      • (2)作用
      • (3)构建总结(作用详解)
  • 四、vite配置语法提示
    • 1. 方式一
    • 1. 方式二
  • 五、vite通过环境变量来配置开发、生产环境


一、什么是构建工具?

1.为什么使用构建工具?

因为浏览器只能识别html、css、JavaScript类型的文件,而typescript、vue、less… 等不同文件需要转化为不同文件,在实际开发中稍微改一点东西都需要重新编译,非常麻烦,加上一些文件需要降级为旧版本的浏览器代码(如es6转换为es5),构建打包工具应运而生。

2.构建工具的作用?

(1)模块化的开发(如node_modules文件中引入代码)
(2)处理兼容性的代码(如less、ts语法转换不是构建工具做的,而是构建工具将这些语法对应的程序集成在一起统一处理)
(3)提高项目性能(如打包后将代码压缩,删除空格、压缩图片大小等,因为代码体积越小,传输服务器的请求构建页面越快)
(4)优化开发体验(同vue中的热更新、解决跨域、解决es6降级为es5的语法等)——构建工具可以让我们不用关心在什么地方,干什么,只需要配置相对应的文件就能达到需要的效果。

3.构建工具怎么用?

二、经典面试题:webpack和vite的区别

1、基础概念不同;2、编译方式不同;3、开发效率不同;4、扩展性不同;5、应用场景不同

1.编译方式不同

项目越大,构建工具(webpack)就会运行的越慢,因为webpack是将所有的模块加载完成后启动服务的,而vite是运行一部分就加载一部分。

为什么webpack需要将所有的模块加载完才能启动服务呢?这就涉及到基础概念的问题了。

下图:webpack和vite构建的流程图
在这里插入图片描述

2.基础概念不同

webpack支持多种模块化,它可以把许多不同类型的模块和资源文件打包为静态资源,因此需要一开始就统一代码,意味着在项目运行前就需要将所有的依赖都一边后运行。
vite 基于浏览器原生 ES imports 的开发服务器。

3.开发效率不同

webpack的热更新是全量更新,即使修改一个小文件,也会重新编译整个应用,使得在越大的项目中导致编译速度变慢。
vite的热更新是增量更新,只更新修改的文件,(即允许在运行时动态导入和导出模块)所以即使在大型项目中也能保持极快的编译速度。

4.扩展性不同

webpack自2012年诞生,有着成熟的插件生态,几乎可以实现任何你想要的功能,扩展性以及灵活性非常强。
vite虽然也支持插件,但相较于webpack的生态,还有较长的距离。

5.应用场景不同

webpack由于其丰富的功能和扩展性,适合于大型、复杂的项目。
而vite凭借其轻量和速度,更适合于中小型项目和快速原型开发。

6.总结( vite会取代webpack吗?)

vite和webpack的区别:
1、基础概念不同;
2、编译方式不同;
3、开发效率不同;
4、扩展性不同;
5、应用场景不同。

vite会取代webpack吗?
总的来说,vite即使有着较快的运行速度和编译速度,但只支持浏览器原生 ES imports 的局限性(即是优势,也是劣势,利用ES Module的特性,只对浏览器请求的文件进行实时编译,而不是像Webpack那样对整个项目进行预编译。这大大提高了开发环境的启动速度和热更新速度。),以及远远低于webpack高度的自定义性和成熟的生态,注定无法取代webpack。

三、vite的基本了解

1.vite和vite-cli的区别

举个毛坯房和精装房的区别。
webpack(毛坯)和 vue-cli(精装)
vite(毛坯)和vite-cli(精装)
vite和vite-cli本质上是两个东西,是vue团队为了方便使用,给了一个常用的配置项目给你使用,和vue-cli一样,不用从0开始用webpack构建vue项目一样。yarn create就是vite-cli的使用。但是这里说vite的详细使用,和vite-cli是没有很大关系的,在这里说明一下。
在这里插入图片描述

2.Rollup 打包代码

(1)学习vite了解rollup的原因

vite的官网原话:使用rollup打包你的代码。如果你想了解vite,了解rollup也是必不可少的。
在这里插入图片描述

(2)使用rollup打包 ES 模块的原因

rollup.js 的开发本意,是打造一款简单易用的 ES 模块打包工具,不必配置,直接使用。这一点,它确实做到了。
后来经过不断发展,它也可以打包 CommonJS 模块。但是,这时需要经过复杂配置,实际上并没有比 Webpack 简单多少。
因此建议,只把 rollup.js 用于打包 ES 模块,这样才能充分发挥它的优势。

总结:rollup用来做es模块的打包工具。如果

(3) ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。

①举例:commonJS和ES6导出一个自增函数调用。连续调用两次,commonJS会输出1,ES6输出2。
②CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

(4) 为什么说vite只支持浏览器原生 ES imports 的局限

上面说了由于vite只支持浏览器原生 ES imports 的局限导致不能取代webpack,以简单的模块导入为例子,在新建项目中,安装loader,在js文件中导入loader, import loader from ‘loader’ ,这里直接在JavaScript中执行会出现 js中不能使用相对路径,需要 / ./ …/ 这样的形式引入的报错。

为什么es module 不去多走这一步呢?
答案:es import导入了loader,会同时导入和loader同级的n个文件。导致消耗过大。服务端由于导入的都是本地缓存文件,没有这个问题。

3.vite的依赖预构建

(1)过程

首先vite会找到对应的依赖,通过esbuild(对js语法处理的一个库)将其他规范的代码转换为esmodeule规范的代码,然后放到当前目录下node_modules/.vite/deps,同时对而是modules规范的各个模块进行统一集成。

(2)作用

1.由于不同的第三方包有不同导出格式。(把所有的库改为esmodules规范导入)
2.对路径的处理可以直接使用 .vite/deps,方便路径重写。
3.解决网络多包传输的性能问题。(也就是原生esmodules导入文件不能用相对路径的原因之一)

(3)构建总结(作用详解)

(1)当你导入了一个模块,然后vite 会进行自动补全功能,在node_modules中找到对应的文件。
(2)同时,由于使用相对路径会导致同时导入与你导入模块相关的n个模块影响性能(也就是esmodules导入不能使用相对路径的原因之一),这里再开发环境中使用绝对路径,再生产环境中用rollupJs打包公构建解决。
(3)之后,由于不同的库导出方式不同(如commonJS、esmodules),你无法约束所有的库导出方式统一,所以,==vite 重写你导出的模块变为函数,也就是在实际开发过程中你导入那个模块,就构建那个模块的情况。==如下面示例。

// 举例
// 1:有个库导出了a模块
export default function a(){}
// 2:index.js 文件中
export { default as a }function./a.js’
// 第2步相当于下面代码(将这个模块导入又导出了)
import a from './a.js'
export const a = a;// vite 重写
function a(){}

四、vite配置语法提示

1. 方式一

const viteConfig = {// 配置
}
export default viteConfig;

1. 方式二

import {defineConfig} from "vite";export default defineConfig( config:{// 配置
})

五、vite通过环境变量来配置开发、生产环境

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 组件实现v-model

ChatgGPT4.0国内站点: 海鲸AI 在Vue中,可以通过使用v-model指令来实现双向数据绑定。如果你想在自定义组件中使用v-model,需要做一些额外的工作。 首先,在组件的props中定义一个名为value的属性,用于接收父组件传递的值。然后&a…

QT- QT-lximagerEidtor图片编辑器

QT- QT-lximagerEidtor图片编辑器 一、演示效果二、关键程序三、下载链接 功能如下: 1、缩放、旋转、翻转和调整图像大小 2、幻灯片 3、缩略图栏(左、上或下);不同的缩略图大小 4、Exif数据栏 5、内联图像重命名 6、自定义快捷方式…

MybatisPlus的分页插件

PaginationInnerInterceptor 此插件是核心插件,目前代理了 Executor#query 和 Executor#update 和 StatementHandler#prepare 方法。 在SpringBoot环境中配置方式如下: /*** author giserDev* description 配置分页插件、方言、mapper包扫描等* date 2023-12-13 …

删除一个字符串中的指定字母,如:字符串 “aca“,删除其中的 a 字母。

#include<stdio.h> #include<stdlib.h> #include<string.h> // 删除字符串中指定字母函数 char* deleteCharacters(char * str, char * charSet) { int hash [256]; if(NULL charSet) return str; for(int i 0; i < 256; i) …

B - Team Gym - 102801B ( 网络流问题)

题目链接 先占个坑&#xff0c;有空写一下思路 #include <bits/stdc.h> using namespace std; #define pi acos(-1) #define xx first #define yy second #define endl "\n" #define lowbit(x) x & (-x) #define int long long #define ull unsigned lo…

Vue3安装使用Mock.js--解决跨域

首先使用axios发送请求到模拟服务器上&#xff0c;再将mock.js模拟服务器数据返回给客户端。打包工具使用的是vite。 1.安装 npm i axios -S npm i mockjs --save-dev npm i vite-plugin-mock --save-dev 2.在vite.config.js文件中配置vite-plugin-mock等消息 import { viteMo…

RedisHelper

Redis面试题&#xff1a; 1、什么是事务&#xff1f;2、Redis中有事务吗&#xff1f;3、Redis中的事务可以回滚吗&#xff1f; 答&#xff1a; 1、事务是指一个完整的动作&#xff0c;要么全部执行&#xff0c;要么什么也没有做 2、Redis中有事务&#xff0c;Redis 事务不是严…

分页操作中使用LIMIT和OFFSET后出现慢查询的原因分析

事情经过 最近在做批量数据处理的相关业务&#xff0c;在和下游对接时&#xff0c;发现拉取他们的业务数据刚开始很快&#xff0c;后面会越来越慢&#xff0c;40万数据一个小时都拉不完。经过排查后&#xff0c;发现对方用了很坑的分页查询方式 —— LIMIT OFFSET&#xff0c;…

【前端学习记录】Vue前端规范整理

文章目录 前言一、文件及文件夹命名二、钩子顺序三、注释规范四、组件封装五、CSS编码规范六、JS编码规范 前言 优秀的项目源码&#xff0c;即使是多人开发&#xff0c;看代码也如一人之手。统一的编码规范&#xff0c;可使代码更易于阅读&#xff0c;易于理解&#xff0c;易于…

mysql中NULL值

mysql中NULL值表示“没有值”&#xff0c;它跟空字符串""是不同的 例如&#xff0c;执行下面两个插入记录的语句&#xff1a; insert into test_table (description) values (null); insert into test_table (description) values ();执行以后&#xff0c;查看表的…

harmonyOS鸿蒙内核概述

内核概述 内核简介 用户最常见到并与之交互的操作系统界面&#xff0c;其实只是操作系统最外面的一层。操作系统最重要的任务&#xff0c;包括管理硬件设备&#xff0c;分配系统资源等&#xff0c;我们称之为操作系统内在最重要的核心功能。而实现这些核心功能的操作系统模块…

2023年全国职业院校技能大赛信息安全管理与评估正式赛(模块三理论技能)

2023年全国职业院校技能大赛&#xff08;高等职业教育组&#xff09;“信息安全管理与评估”理论技能 理论技能与职业素养&#xff08;100分&#xff09; 【注意事项】 1.理论测试前请仔细阅读测试系统使用说明文档&#xff0c;按提供的账号和密码登录测试系统进行测试&…

【经验分享】gemini-pro和gemini-pro-vision使用体验

Gemini Gemini已经对开发者开放了Gemini Pro的使用权限&#xff0c;目前对大家都是免费的&#xff0c;每分钟限制60条&#xff0c;至少这比起CloseAI的每个账户5刀限速1min3条要香的多&#xff0c;目前已于第一时间进行了体验 一句话总结&#xff0c;google很大方&#xff0c;但…

【Spring】@SpringBootApplication注解解析

前言&#xff1a; 当我们第一次创建一个springboot工程时&#xff0c;我们会对启动类&#xff08;xxxApplication&#xff09;有许多困惑&#xff0c;为什么只要运行启动类我们在项目中自定义的bean无需配置类配置&#xff0c;扫描就能自动注入到IOC容器中&#xff1f;为什么我…

仿牛客论坛的一些细节改进

私信列表的会话头像链接到个人主页 原来的不足 点击私信列表的会话头像应该要能跳转到该目标对象的个人主页。 原来的代码&#xff1a; <a href"profile.html"><img th:src"${map.target.headerUrl}" class"mr-4 rounded-circle user-he…

三、Java运算符

1.运算符和表达式 运算符&#xff1a; ​ 就是对常量或者变量进行操作的符号。 ​ 比如&#xff1a; - * / 表达式&#xff1a; ​ 用运算符把常量或者变量连接起来的&#xff0c;符合Java语法的式子就是表达式。 ​ 比如&#xff1a;a b 这个整体就是表达式。 ​ 而其…

数据分析为何要学统计学(4)——何为置信区间?它有什么作用?

置信区间是统计学中的一个重要工具&#xff0c;是用样本参数()估计出来的总体均值在某置信水平下的范围。通俗一点讲&#xff0c;如果置信度为95%&#xff08;等价于显著水平a0.05&#xff09;&#xff0c;置信区间为[a,b]&#xff0c;这就意味着总体均值落入该区间的概率为95%…

Two Phase Termination(两阶段)设计模式

Two Phase Termination设计模式是针对任务由两个环节组成&#xff0c;第一个环节是处理业务相关的内容&#xff0c;第二个阶段是处理任务结束时的同步、释放资源等操作。在进行两阶段终结的时候&#xff0c;需要考虑&#xff1a; 第二阶段终止操作必须保证线程安全。 要百分百…

2036开关门,1109开关门

一&#xff1a;2036开关门 1.1题目 1.2思路 1.每次都是房间号是服务员的倍数的时候做处理&#xff0c;所以外层&#xff08;i&#xff09;枚举服务员1~n&#xff0c;内层&#xff08;j&#xff09;枚举房间号1~n&#xff0c;当j % i0时&#xff0c;做处理 2.这个处理指的是&…

小项目:迷宫

目录 引言1.题目描述及思想2.代码实现3.最终结果 引言 这个迷宫的话就是去年这时候&#xff0c;我记得当时讲这个的时候我还是一脸懵逼&#xff0c;就是事后花时间能够看懂&#xff0c;能够理解&#xff0c;但是自己肯定是不能够实现的&#xff0c;而且觉得这个东西非常的庞大…