- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
Vite 是一个前端构建工具,它以其快速的开发服务器和生产优化的打包器而闻名前端界,今天的内容,必须得唠唠 Vite 的关键能力,以下是 Vite 的核心组件分析,以及使用案例:
原理分析:
ESModule
语法的支持,在开发环境中不进行打包编译,而是通过启动本地 devServer
来提供服务,从而显著提高了启动速度 。esbuild
进行依赖预构建,将多种模块化规范转换为 ESM,并减少网络请求 。es-module-lexer
和 magic-string
重写模块路径 。源码实现:
使用技巧:
Vite 相对于 Webpack 的优势:
Vite 的设计哲学是尽可能利用现代浏览器的能力,减少不必要的打包操作,从而提高开发效率。在生产环境中,Vite 使用 Rollup 进行打包,确保了最终产物的优化和性能 .
Vite 的核心组件功能主要包括以下几个方面:
开发服务器(Dev Server):
按需编译:
依赖预构建:
esbuild
预先构建依赖,将 CommonJS、UMD 等模块化规范转换为 ESM,减少网络请求次数,提高性能。热模块替换(HMR):
缓存机制:
模块路径重写:
es-module-lexer
和 magic-string
来解析和重写模块路径,以适应浏览器的模块加载机制。构建优化:
插件系统:
下面 V 哥将一一介绍这些核心功能并结合案例讲解.
开发服务器(Dev Server)是 Vite 的核心组件之一,它在开发过程中提供了快速的模块加载和热更新功能。以下是开发服务器的一个简单案例和解析:
假设我们有一个简单的 Vue 3 项目,我们希望使用 Vite 来启动开发服务器。以下是项目的目录结构和关键文件:
/my-vue-app
|-- node_modules
|-- public
| |-- index.html
|-- src
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
public/index.html
): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
src/App.vue
): <template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script setup>
const message = 'Hello Vite!';
</script>
vite.config.js
): // vite.config.js
module.exports = {
// 配置选项...
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
这个命令会执行 package.json 中定义的 "dev" 脚本,使用 Vite 启动开发服务器.
服务启动:
npm run dev
时,Vite 会启动一个本地开发服务器。模块服务:
index.html
中引用的 type="module"
脚本提供服务。按需加载:
/src/main.js
时,Vite 服务器会提供该文件的内容,并按需解析和加载依赖的模块(如 App.vue
)。热更新(HMR):
App.vue
或其他依赖文件发生变化,Vite 会通过 WebSocket 推送更新到浏览器,实现热更新,而无需刷新页面。源码映射(Sourcemap):
开发与生产分离:
按需编译是 Vite 的一个核心特性,它允许开发者在开发过程中只编译那些被实际请求的模块,而不是整个项目。以下是使用 Vite 进行按需编译的案例和解析:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
| |-- SomeComponent.vue
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
src/App.vue
): <template>
<div>
<h1>Home Page</h1>
<button @click="loadComponent">Load Component</button>
</div>
</template>
<script>
import SomeComponent from './SomeComponent.vue';
export default {
methods: {
loadComponent() {
this.$forceUpdate();
this.$options.components.SomeComponent = SomeComponent;
}
}
}
</script>
src/SomeComponent.vue
): <template>
<div>
<h2>I'm a lazy-loaded component!</h2>
</div>
</template>
<script>
export default {
name: 'SomeComponent'
}
</script>
vite.config.js
): // vite.config.js
module.exports = {
// 配置选项...
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
首次加载:
main.js
和 App.vue
会被加载和编译,因为它们是初始入口点。按需加载组件:
loadComponent
方法时,SomeComponent.vue
将被按需加载。由于 Vite 支持 ES 模块,这个组件将通过动态 import()
语法异步加载。编译请求的模块:
SomeComponent.vue
被请求时,Vite 的开发服务器会捕获这个请求,并编译该模块,然后将其发送给浏览器。热更新(HMR):
SomeComponent.vue
在开发过程中被修改,Vite 将通过 HMR 更新浏览器中的组件,而不需要重新加载整个页面。优化开发体验:
一句话,Vite 通过按需编译,从而提供更快速的开发体验和更高效的资源管理.
依赖预构建是 Vite 的一个重要特性,它在项目启动之前预先处理项目依赖,将非 ES 模块转换为 ES 模块,以减少开发时的模块请求次数和提高性能。以下是依赖预构建的案例和解析:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
| |-- some-pkg/
| |-- package.json
| |-- index.js
|-- src/
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
node_modules/some-pkg/index.js
- 一个 CommonJS 模块): // CommonJS 模块
exports.default = function() {
console.log('CommonJS package loaded');
};
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
import somePkg from 'some-pkg';
somePkg.default(); // 使用预构建的依赖
const app = createApp(App);
app.mount('#app');
src/App.vue
): <template>
<div>
<h1>App Component</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
vite.config.js
): // vite.config.js
module.exports = {
// 配置选项,例如别名 @ 指向 src 目录
alias: {
'@': '/src',
},
// 其他配置...
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0",
"some-pkg": "1.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
预构建过程:
node_modules
目录中的依赖,并使用 esbuild
这个高性能的 JavaScript 打包器来预构建这些依赖。转换模块类型:
esbuild
会将其转换为 ES 模块,以便浏览器能够通过 import
语句加载。减少请求次数:
缓存优化:
node_modules/.vite
目录中,这样在开发过程中,只有当依赖发生变化时,才会重新构建,否则直接使用缓存。兼容性:
开发服务器启动:
小结一下,Vite 能够显著提高大型项目的开发效率和性能,同时确保了代码的兼容性和模块的按需加载.
热模块替换(Hot Module Replacement)是 Vite 在开发过程中提供的一项功能,它允许开发者在不刷新整个浏览器页面的情况下,替换、添加或删除模块。下面是 HMR 案例和解析,一起来看看:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- Button.vue
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import Button from './Button.vue';
const app = createApp();
app.component('button-component', Button);
app.mount('#app');
src/Button.vue
): <template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
public/index.html
): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite HMR Demo</title>
</head>
<body>
<div id="app">
<button-component></button-component>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
vite.config.js
): // vite.config.js
module.exports = {
// HMR 默认开启,无需额外配置
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
开发服务器启动:
修改 Button 组件:
Button.vue
的模板或脚本。HMR 替换模块:
Button.vue
组件,并使用 HMR 更新浏览器中的对应模块,而不需要重新加载整个页面。状态保持:
Button.vue
中的 count
状态会保持不变,即使组件被重新加载。用户会看到按钮上显示的计数在点击后继续增加,而页面不会刷新。浏览器开发者工具:
小结一下,我们可以看到 Vite 的 HMR 功能使得开发更加高效,允许开发者快速迭代组件,同时保持应用状态和用户体验.
缓存机制在 Vite 中主要体现在两个方面:HTTP 缓存和文件系统缓存。以下是缓存机制的案例和解析:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
src/App.vue
): <template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vite!'
};
}
}
</script>
public/index.html
): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite Cache Demo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
vite.config.js
): // vite.config.js
module.exports = {
// 配置选项...
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
HTTP 缓存:
Cache-Control
响应头,指定资源可以被浏览器缓存。文件系统缓存:
node_modules/.vite
目录下缓存预构建的依赖。当没有发生变化时,Vite 会直接从这个缓存中读取依赖,避免重复构建。示例操作:
App.vue
中的 message
数据。保存文件后,Vite 会触发 HMR 更新,但不会重新构建整个项目的依赖。浏览器缓存利用:
main.js
),浏览器会根据 HTTP 响应头中的缓存指令缓存这些资源。下次访问相同的资源时,如果资源没有更新,浏览器会使用本地缓存,而不是从服务器重新下载。协商缓存:
ETag
或 Last-Modified
)。当源文件有更新时,Vite 会更新这些标记,浏览器会根据这些标记判断是否需要从服务器获取新的资源。开发体验优化:
Vite 的缓存机制帮助提高开发效率的同时,减少不必要的资源加载和构建过程,get到了没.
Vite 在处理模块路径时,需要将基于 Node.js require.resolve 的路径转换为浏览器可识别的路径。此外,Vite 还支持使用 @ 符号作为 src 目录的别名,这在 Vue 单文件组件(SFC)中尤为常见。来看一下这个案例和解析:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- components/
| | |-- MyComponent.vue
| |-- views/
| | |-- Home.vue
| |-- main.js
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import Home from '@/views/Home.vue';
createApp(Home).mount('#app');
src/views/Home.vue
): <template>
<div>
<h1>Welcome to the Home page</h1>
<my-component />
</div>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>
src/components/MyComponent.vue
): <template>
<div>I'm a component!</div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
vite.config.js
): // vite.config.js
module.exports = {
// 设置别名 @ 指向 src 目录
alias: {
'@/': '/src/',
'vue': 'vue/dist/vue.esm.js'
}
};
package.json
): {
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
在项目根目录下,运行以下命令来启动开发服务器:
npm run dev
别名配置:
vite.config.js
中,我们设置了 @
别名指向项目的 src
目录。这样,我们就可以使用 @/views/Home.vue
这样的路径来代替相对路径或绝对路径。模块请求:
Home.vue
被 main.js
引用时,浏览器会发送一个请求到 Vite 开发服务器,请求 @/views/Home.vue
。路径重写:
@/views/Home.vue
转换为实际的文件路径 /src/views/Home.vue
。处理单文件组件:
es-module-lexer
来解析 import
语句,并根据浏览器对 ES 模块的支持来重写模块路径。服务模块:
.js
和 .css
(如果有)等不同的模块,并单独服务这些模块。浏览器加载:
Vite 通过模块路径重写支持别名和单文件组件的按需加载,从而提高开发效率和模块化管理的便利性,有点意思.
构建优化是 Vite 在生产环境下的关键特性,它确保最终的静态资源被压缩、分割和优化以提高应用的性能。以下是构建优化的案例和解析:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
| |-- SomeLib.js
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
import SomeLib from './SomeLib';
createApp(App).mount('#app');
// 使用库函数
SomeLib.doSomething();
src/App.vue
): <template>
<div id="app">
<h1>My Vue App</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
src/SomeLib.js
): export function doSomething() {
console.log('Library function called');
}
vite.config.js
): // vite.config.js
module.exports = {
build: {
// 配置生产环境构建选项
minify: 'terser', // 使用 terser 进行代码压缩
sourcemap: true, // 生成 sourcemap 文件
rollupOptions: {
output: {
manualChunks: {
lib: ['src/SomeLib.js'], // 将 SomeLib.js 单独打包成一个 chunk
}
}
}
}
};
package.json
): {
"scripts": {
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0",
"terser": "^5.0.0"
}
}
在项目根目录下,运行以下命令来构建项目:
npm run build
配置构建选项:
vite.config.js
中,我们配置了构建选项,包括代码压缩工具 terser
和 sourcemap 生成。手动分块:
rollupOptions
中的 manualChunks
配置将 SomeLib.js
单独打包成一个 chunk,这有助于按需加载和缓存。执行构建:
npm run build
后,Vite 会启动构建流程,根据配置进行代码压缩、分块等操作。代码压缩:
terser
,Vite 会压缩 JavaScript 代码,移除多余的空格、注释,并进行一些优化以减少文件大小。生成 sourcemap:
输出构建结果:
dist
目录下生成优化后的静态资源,包括 JavaScript、CSS 和其他静态资源文件。部署:
Vite在生产环境中进行构建优化,包括代码压缩、手动分块、sourcemap 生成等,以确保应用的性能和可维护性.
Vite 的插件系统允许开发者扩展 Vite 的功能,例如添加对特定类型文件的支持、优化构建流程等,来看一下:
假设我们有以下项目结构:
/my-vue-app
|-- node_modules/
|-- src/
| |-- main.js
| |-- App.vue
| |-- assets/
| |-- image.png
|-- vite.config.js
|-- package.json
src/main.js
): import { createApp } from 'vue';
import App from './App.vue';
import './assets/image.png';
createApp(App).mount('#app');
src/App.vue
): <template>
<div>
<img src="image.png" alt="Image">
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
vite.config.js
): // vite.config.js
import vue from '@vitejs/plugin-vue';
import path from 'path';
import imageTransformPlugin from './imageTransformPlugin'; // 假设我们创建了一个自定义插件
module.exports = {
plugins: [
vue(), // Vite 官方 Vue 插件,用于处理 Vue 单文件组件
imageTransformPlugin, // 使用自定义插件来处理图像转换
],
// 其他配置...
};
imageTransformPlugin.js
): // 自定义插件来处理图像文件
export default {
name: 'image-transform-plugin',
transform(code, id) {
if (id.endsWith('.png')) {
// 假设我们对图像进行某种转换处理
const transformedCode = code.replace(/.png$/, '-transformed.png');
return {
code: transformedCode,
map: null, // 这里简化处理,实际插件应该生成 sourcemap
};
}
},
};
package.json
): {
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"vite": "^2.0.0"
}
}
安装插件:
@vitejs/plugin-vue
,这是 Vite 官方提供的插件,用于支持 Vue 单文件组件。创建自定义插件:
imageTransformPlugin
的自定义插件,用于处理图像文件的转换。配置插件:
vite.config.js
中,我们将这两个插件添加到 plugins
数组中,这样 Vite 在构建时就会应用这些插件。运行 Vite:
npm run dev
或 npm run build
时,Vite 会使用配置的插件来处理项目资源。Vue 插件 (@vitejs/plugin-vue):
.vue
文件,将它们分解为 JavaScript、CSS 和模板代码,并应用 HMR。自定义图像转换插件 (imageTransformPlugin):
.png
结尾的文件请求,并对其进行了简单的“转换”(这里只是示例,实际中可能是更复杂的图像处理逻辑)。插件钩子:
transform
),允许插件在构建过程中的不同阶段介入和修改处理逻辑。应用插件:
Vite 插件系统允许开发者自定义构建流程,增强 Vite 的功能,以适应各种开发需求.
除了以上这些,Vite 还对 Vue 3 和 React 17+ 的官方支持,允许开发者使用这些前端框架进行开发。Vite 内置了对 TypeScript 的支持,无需额外配置即可使用 TypeScript 开发。Vite能够处理 CSS 文件和各种静态资源,包括图片、字体等,并支持 CSS 预处理器。Vite 能够生成 Sourcemap,方便开发者在浏览器中调试源代码。Vite 支持在构建过程中注入环境变量,使得配置更加灵活。如果你还知道哪些关于 Vite 的能力,欢迎给 V 哥点拨一下,在此感谢.
这些核心组件功能共同构成了 Vite 的强大能力,使它成为一个高效、灵活且易于使用的前端构建工具,如果你还没用上 Vite,那就抓紧搞起来吧.
最后此篇关于为什么用Vite框架?来看它的核心组件案例详解的文章就讲到这里了,如果你想了解更多关于为什么用Vite框架?来看它的核心组件案例详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
全称“Java Virtual Machine statistics monitoring tool”(statistics 统计;monitoring 监控;tool 工具) 用于监控虚拟机的各种运
主要是讲下Mongodb的索引的查看、创建、删除、类型说明,还有就是Explain执行计划的解释说明。 可以转载,但请注明出处。  
1>单线程或者单进程 相当于短链接,当accept之后,就开始数据的接收和数据的发送,不接受新的连接,即一个server,一个client 不存在并发。 2>循环服务器和并发服务器
详解 linux中的关机和重启命令 一 shutdown命令 shutdown [选项] 时间 选项: ?
首先,将json串转为一个JObject对象: ? 1
matplotlib官网 matplotlib库默认英文字体 添加黑体(‘SimHei')为绘图字体 代码: plt.rcParams['font.sans-serif']=['SimHei'
在并发编程中,synchronized关键字是常出现的角色。之前我们都称呼synchronized关键字为重量锁,但是在jdk1.6中对synchronized进行了优化,引入了偏向锁、轻量锁。本篇
一般我们的项目中会使用1到2个数据库连接配置,同程艺龙的数据库连接配置被收拢到统一的配置中心,由DBA统一配置和维护,业务方通过某个字符串配置拿到的是Connection对象。  
实例如下: ? 1
1. MemoryCahe NetCore中的缓存和System.Runtime.Caching很相似,但是在功能上做了增强,缓存的key支持object类型;提供了泛型支持;可以读缓存和单个缓存
argument是javascript中函数的一个特殊参数,例如下文,利用argument访问函数参数,判断函数是否执行 复制代码 代码如下: <script
一不小心装了一个Redis服务,开了一个全网的默认端口,一开始以为这台服务器没有公网ip,结果发现之后悔之莫及啊 某天发现cpu load高的出奇,发现一个minerd进程 占了大量cpu,googl
今天写这个是为了 提醒自己 编程过程 不仅要有逻辑 思想 还有要规范 代码 这样可读性 1、PHP 编程规范与编码习惯最主要的有以下几点: 1 文件说明 2 funct
摘要:虚拟机安装时一般都采用最小化安装,默认没有lspci工具。一台测试虚拟网卡性能的虚拟机,需要lspci工具来查看网卡的类型。本文描述了在一个虚拟机中安装lspci工具的具体步骤。 由于要测试
1、修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时,最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统
目录 算术运算符 基本四则运算符 增量赋值运算符 自增/自减运算符 关系运算符 逻
如下所示: ? 1
MapperScannerConfigurer之sqlSessionFactory注入方式讲解 首先,Mybatis中的有一段配置非常方便,省去我们去写DaoImpl(Dao层实现类)的时间,这个
Linux的网络虚拟化是LXC项目中的一个子项目,LXC包括文件系统虚拟化,进程空间虚拟化,用户虚拟化,网络虚拟化,等等,这里使用LXC的网络虚拟化来模拟多个网络环境。 本文从基本的网络设备讲
? 1
我是一名优秀的程序员,十分优秀!