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通过环境变量来配置开发、生产环境

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

孩子都能学会的FPGA:第三十一课——用FPGA实现SPI主机发送数据

(原创声明:该文是作者的原创,面向对象是FPGA入门者,后续会有进阶的高级教程。宗旨是让每个想做FPGA的人轻松入门,作者不光让大家知其然,还要让大家知其所以然!每个工程作者都搭建了全自动化的仿…

【Python】conda镜像配置,.condarc文件详解,channel镜像

1. conda 环境 安装miniconda即可,Miniconda 安装包可以到 http://mirrors.aliyun.com/anaconda/miniconda/ 下载。 .condarc是conda 应用程序的配置文件,在用户家目录(windows:C:\users\username\),用于…

SAP PP 配置学习(一)

物料主数据 一、定义物料类型属性 未检查的外部号分配:这是指如果用户自己输入的物料编码超出了定义的编码范围,是否会提示错误。 勾上代表不检查。 用户部门:这里勾选需要进行维护的视图,如果不选择,那么在新建和维…

苍穹外卖项目笔记(12)— 数据统计、Excel报表

前言 代码链接: Echo0701/take-out⁤ (github.com) 1 工作台 需求分析和设计 产品原型 工作台是系统运营的数据看板,并提供快捷操作入口,可以有效提高商家的工作效率 接口设计 ① 今日数据接口: ② 订单管理接口&#xff1…

智慧灯杆技术应用分析

智慧灯杆是指在传统灯杆的基础上,通过集成多种先进技术实现城市智能化管理的灯杆。智慧灯杆技术应用的分析如下: 照明功能:智慧灯杆可以实现智能调光、时段控制等功能,根据不同的需求自动调节照明亮度,提高照明效果&am…

论文阅读《Parameterized Cost Volume for Stereo Matching》

论文地址:https://openaccess.thecvf.com/content/ICCV2023/papers/Zeng_Parameterized_Cost_Volume_for_Stereo_Matching_ICCV_2023_paper.pdf 源码地址:https://github.com/jiaxiZeng/Parameterized-Cost-Volume-for-Stereo-Matching 概述 现有的立体匹…

SpringBoot整合Lucene实现全文检索【详细步骤】【附源码】

笑小枫的专属目录 1. 项目背景2. 什么是Lucene3. 引入依赖,配置索引3.1 引入Lucene依赖和分词器依赖3.2 表结构和数据准备3.3 创建索引3.4 修改索引3.5删除索引 4. 数据检索4.1 基础搜索4.2 一个关键词,在多个字段里面搜索4.3 搜索结果高亮显示4.4 分页检…

数组相关的题目

数组相关的题目 128. 最长连续序列 128. 最长连续序列 题目:给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。 很容易就能想到要先排序,再进行后续的处理。有一个坑&a…

Java集合--Map

1、Map集合概述 在Java的集合框架中&#xff0c;Map为双列集合&#xff0c;在Map中的元素是成对以<K,V>键值对的形式存在的&#xff0c;通过键可以找对所对应的值。Map接口有许多的实现类&#xff0c;各自都具有不同的性能和用途。常用的Map接口实现类有HashMap、Hashtab…

交易历史记录20231206 记录

昨日回顾&#xff1a; select top 10000 * from dbo.CODEINFO A left join dbo.全部&#xff21;股20231206010101 B ON A.CODE B.代码 left join dbo.全部&#xff21;股20231206CONF D on A.CODED.代码left join dbo.全部&#xff21;股20231206 G on A.CODEG.代码 left…

铭飞CMS list 接口 SQL注入漏洞复现

0x01 产品简介 铭飞CMS是一款基于java开发的一套轻量级开源内容管理系统,铭飞CMS简洁、安全、开源、免费,可运行在Linux、Windows、MacOSX、Solaris等各种平台上,专注为公司企业、个人站长快速建站提供解决方案 0x02 漏洞概述 铭飞CMS在5.2.10版本以前list 接口处存在sql注入…

电子元器件介绍——电阻(一)

电子元器件 文章目录 电子元器件前言1.1电阻基本知识1.2电阻的作用1.3电阻的分类1.4 贴片电阻贴片电阻的规范、尺寸、封装 1.5 技术参数噪声&#xff1a; 1.6 电阻的失效 总结 前言 接下来我们就把常用的电子元器件全部介绍给大家&#xff0c;这一节是电阻&#xff0c;电容电感…

用提问的方式来学习:冯·诺伊曼体系结构与操作系统OS

学习冯诺伊曼体系结构之前&#xff0c;我们要本着两个问题来学习&#xff1a; 什么是冯诺伊曼体系结构&#xff1f;为什么要有冯诺伊曼体系结构&#xff1f; 一、冯诺伊曼体系结构 1. 什么是冯诺伊曼体系结构&#xff1f; 那我们就先来回答一下什么是冯诺伊曼体系结构&#x…

探索GameFi:区块链与游戏的未来融合

在过去的几年里&#xff0c;区块链技术逐渐渗透到各个领域&#xff0c;为不同行业带来了前所未有的变革。其中&#xff0c;游戏行业成为了一个引人注目的焦点&#xff0c;而这种结合被称为GameFi&#xff0c;即游戏金融。GameFi不仅仅是一个概念&#xff0c;更是一场区块链和游…

3-分布式存储之Ceph

任务背景 虽然使用了分布式的glusterfs存储, 但是对于爆炸式的数据增长仍然感觉力不从心。对于大数据与云计算等技术的成熟, 存储也需要跟上步伐. 所以这次我们选用对象存储. 任务要求 1, 搭建ceph集群 2, 实现对象存储的应用 任务拆解 1, 了解ceph 2, 搭建ceph集群 3, 了…

批量生成标题文章:AI文章创作助力高效办公,提升办公效率

随着人工智能技术的不断发展&#xff0c;AI文章创作已经成为了高效办公的新趋势。这种技术可以快速生成高质量的文章&#xff0c;从而大大提高办公效率。相比传统的手写文章&#xff0c;AI文章创作具有更高的效率和准确性。在撰写文章时&#xff0c;往往要花费大量的时间和精力…

【Jmeter】Jmeter基础8-Jmeter元件介绍之断言

断言主要用于对服务器响应的数据做验证。Jmeter提供了多个断言元件&#xff0c;其中最常用的是响应断言。 2.8.1、响应断言 作用&#xff1a;对Jmeter取样器返回值进行断言。参数说明&#xff1a; 测试字段 响应文本&#xff1a;从服务器返回的响应文本&#xff0c;Response B…

手写进度条,鼠标移入显示悬浮框

效果 <template><div class"box"><div class"mid-box"><div class"mid-contant"><!-- 提示框 --><divv-if"hover"class"tooltip":style"{top: hovertop,}"><div>{{ ho…

模块二——滑动窗口:438.找到字符串中所有字母异位词

文章目录 题目描述算法原理滑动窗口哈希表 代码实现 题目描述 题目链接&#xff1a;438.找到字符串中所有字母异位词 算法原理 滑动窗口哈希表 因为字符串p的异位词的⻓度⼀定与字符串p 的⻓度相同&#xff0c;所以我们可以在字符串s 中构造⼀个⻓度为与字符串p的⻓度相同…

基础算法(2):排序(2):计数排序

1.计数排序实现 计数排序是一个非基于比较的稳定的线性时间的排序算法&#xff0c;而选择排序是基于比较的&#xff0c;计数排序不用&#xff0c;它的实现依靠计数。 工作原理&#xff1a;使用一个额外的数组&#xff0c;其中第i个位置是待排序数组1中值等于i的元素的个数&…