解锁前端开发速度的秘密武器【Vite】

在前端开发的江湖中，有人偏爱 Webpack 的强大与稳定，有人钟情于 Rollup 的轻量与高效。而 Vite，这个后来居上的工具，却以“极致的快”和“极简的易”赢得了开发者的芳心。众所周知万事都有缘由，接下来我们就来深度剖析 Vite，看看它凭什么成为现代前端开发的宠儿。

一、什么是 Vite？

Vite，意为“快”（法语中读作 /vit/）。它由 Vue.js 的作者尤雨溪团队开发，因此也是因为这个先天原因，让他可以更好的配合 Vue 来使用。旨在解决传统构建工具慢、配置复杂的问题。Vite 的两大核心特点：

  • 极速冷启动：得益于原生 ESM（浏览器支持的 ES 模块）。

  • 按需热更新：基于模块化的 HMR（热模块替换），只更新需要的部分，速度飞快。

简单地说，Vite 是一种“快如闪电”的开发体验。

我们来看看官网中的效果图，他的功能之一是把所有需要编译的文件，不用分多个对应的编译工具，而是直接通过一个 Vite 就能变成浏览器能识别的原生 HTML、CSS、JavaScript 文件：

【另外，Vite还提供了模板解析功能】

  • 开发阶段：Vite 等构建工具提供了，模块解析功能允许省略文件扩展名（如 .ts, .vue），自动处理模块导入路径
 import { useUserStore } from '@/stores/user'  // 不需要 .ts
  • 构建阶段：构建工具会自动处理并添加正确的文件扩展名，将代码编译成浏览器可以直接运行的静态资源，生成最终的生产环境文件

二、为什么开发需要“快”？

想象你在使用传统工具开发时，每次保存代码都要等待几秒钟。等着等着，你打开了手机刷了条短视频，结果回来发现忘了刚刚改了啥。开发效率和注意力全被拖垮了。

而 Vite 的即时响应让人直呼过瘾：修改代码，页面瞬间更新！就像和浏览器的对话一样顺滑。它通过 原生 ESM 和 按需编译，省去了传统工具动辄几分钟的冷启动等待。

哈哈哈，我这说的跟营销员打广告似的，但是体验过传统工具比如 Webpack 启动项目的朋友们就知道我没有夸大其词了。

三、Vite 的魔法：如何解析 .vue 文件？

对于 Vue 开发者来说，.vue 文件是家常便饭，但浏览器天生只认识 HTML、CSS 和 JavaScript，那 .vue 文件怎么办？

当浏览器请求 .vue 文件时，Vite 会拦截这个请求，通过内置的 @vitejs/plugin-vue 插件将 .vue 文件动态转换成浏览器可理解的 JavaScript 模块：

  • 模板部分转为渲染函数。

  • 脚本部分直接生成 JavaScript。

  • 样式部分注入页面中的 <style> 标签。

这一切都在后台“悄无声息”地完成，而你只需要关注代码本身。无论是 App.vue 还是组件库的其他文件，都能秒速加载。

四、静态资源和别名配置：写代码就像在开盲盒

Vite 还为静态资源提供了优雅的解决方案。无论是图片、字体，还是视频资源，都能在项目中轻松引入。

1. 动态加载资源

  • 小于 4kb 的资源会被内联到代码中，大文件则会自动生成带哈希值的路径，方便缓存管理。

const logo = await import('@/assets/logo.png');

2. 别名支持

想象一下，不用再写一大串 ../../../assets/logo.png，通过别名直接写成 @/assets/logo.png，路径整洁心情都变好了！

3. 配置方式

resolve: {alias: {'@': path.resolve(__dirname, 'src'),},
}

五、插件：你的功能扩展宝库

Vite 的插件机制就像给开发加了外挂。你可以用官方插件支持 Vue，也可以通过社区插件生成 SVG 图标，甚至自己开发插件。以下是一些必备插件：

  • @vitejs/plugin-vue：Vue 支持 Vue 开发必装插件，解析 .vue 文件，支持 <script setup>、Vue 3 的各种语法特性。

  • vite-plugin-compression：生产环境压缩 自动压缩资源，提升页面加载速度。

  • vite-plugin-pwa：PWA 支持 一键为项目添加渐进式 Web 应用能力。

开发中，插件不仅提升效率，还能让你更加专注于业务逻辑。

我们以@vitejs/plugin-vue插件为例，介绍一下如何在vite项目中使用插件

  • 安装：
npm install @vitejs/plugin-vue --save-dev
  • 使用：
import vue from '@vitejs/plugin-vue';
export default defineConfig({plugins: [vue()],
});

六、TypeScript：更安全的开发方式

Vite 天然支持 TypeScript，让代码更规范、更安全。以下是 Vite 中使用 TS 的几个技巧：

1. 定义 Props 和 Emit

defineProps<{ title: string }>();
const emit = defineEmits<(event: 'submit') => void>();

2. 全局类型声明：

declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}

3. 类型检查插件

使用 vite-plugin-checker 集成 TS 类型检查：

import checker from 'vite-plugin-checker';
export default defineConfig({plugins: [checker({ typescript: true })],
});

七、Vite 的预打包机制详解

在使用 Vite 开发项目时，预打包（Pre-Bundling）是一个非常重要的优化机制。它的主要目的是加快依赖的加载速度和提高开发体验。以下是 Vite 预打包的详细工作流程：

1. 什么是预打包？

预打包是指 Vite 在项目启动时，使用 esbuild 对第三方依赖（如 npm 包）进行一次性打包。这些打包的文件会存储在本地缓存中，以便后续直接加载，而不需要每次解析。

2. 为什么需要预打包？

  • 减少网络请求： 浏览器在解析 ESM 模块时，需要发起大量的网络请求，尤其是遇到模块嵌套时。通过预打包，Vite 将多个模块合并为一个，从而减少请求数量。

  • 提高解析效率： 通过将第三方依赖预先转换为浏览器可直接使用的 ESM 格式，减少开发服务器在运行时的开销。

3. 预打包的具体流程

  • 收集依赖： Vite 在启动时，会扫描项目中的依赖关系，找出第三方模块（如 node_modules 中的包）。

  • 调用 esbuild： 使用 esbuild 将这些模块快速打包为 ESM 格式的文件。

  • 存储缓存： 打包后的文件会存储在项目的 node_modules/.vite 目录下。

4. 如何手动控制预打包？

Vite 提供了灵活的配置项，允许开发者手动调整预打包行为：

  • 强制重新预打包： 使用命令 npx vite --force，可以清除缓存并强制重新打包所有依赖。

  • 优化选项： 在 vite.config.ts 中，使用 optimizeDeps 选项调整预打包行为：

    export default defineConfig({optimizeDeps: {include: ['lodash', 'axios'], // 手动指定需要预打包的依赖exclude: ['some-large-package'], // 排除不需要预打包的依赖},
});

【预打包的注意事项】

  • 开发体验： 如果项目中依赖数量较多，初次启动时间可能会稍长，但之后的开发过程中会极大提升速度。

  • 依赖变更： 如果更新了依赖版本，可能需要清理 .vite 缓存目录，并重新预打包。

通过预打包机制，Vite 不仅加快了开发服务器的响应速度，还让模块的加载更加高效，为开发者带来了极致的流畅体验。

八、Vite 的常用配置文件详解

在 Vite 项目中，vite.config.ts 是核心配置文件，我们应该要能熟练搭配其配置项开发项目，以更加高效的开发项目以及优化项目，我们来附上常用配置项及其功能的注释：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'
​
export default defineConfig({// 插件配置，用于扩展 Vite 的功能plugins: [vue()], // 加载 Vue.js 插件，支持 .vue 文件
​// 项目根目录，默认为 process.cwd()【用于返回当前工作目录的路径。】root: './src', // 指定项目的根目录，默认为当前文件所在目录
​// 用于指定应用的公共基础路径（Base URL）。base: '/',
​// 开发服务器配置server: {// 监听地址host: '0.0.0.0', //设置为 0.0.0.0 可使局域网访问// 端口号，默认 5173port: 3000, // 是否在浏览器中自动打开open: true, // 是否启用 HTTPShttps: false,// 配置代理规则proxy: {'/api': {// 代理目标地址target: 'https://api.example.com',// 是否更改请求源，修改为目标服务器的域名或 IP 地址changeOrigin: true,// 重写路径rewrite: (path) => path.replace(/^\/api/, ''), },},},
​// 构建配置build: {// 输出目录，默认是 distoutDir: 'dist',// 静态资源目录，存放在指明文件夹名中assetsDir: 'assets',// 是否生成 sourcemap 文件sourcemap: false,// 指定压缩工具，支持 'esbuild' 和 'terser'minify: 'esbuild', // 自定义 Rollup 构建配置rollupOptions: {// 自定义入口文件input: './src/main.js',output: {manualChunks: {// 将 Vue 分离到 vendor 文件vendor: ['vue'],},},}, },
​// 别名配置resolve: {alias: {// 配置 @ 为 /src 路径'@': path.resolve(__dirname, 'src'),// 配置组件路径别名components: '/src/components', },// 导入时省略的文件扩展名extensions: ['.js', '.ts', '.vue', '.json'],},
​// 设置 CSS 预处理器选项和模块化配置，方便全局样式管理。css: {preprocessorOptions: {// 自动引入全局 SCSS 变量scss: {additionalData: `@import "@/styles/variables.scss";`, },},modules: {// 默认所有 CSS 模块化scopeBehaviour: 'local', // 自定义类名生成规则generateScopedName: '[name]__[local]__[hash:base64:5]', },},
​// 环境变量配置envDir: './env', //指定存放环境变量文件的目录，默认是根目录// 指定环境变量的前缀，默认为 VITE_envPrefix: ['VITE_'],// 预打包配置，加快开发服务器启动速度。optimizeDeps: {include: ['lodash'], // 手动指定需要预打包的依赖exclude: ['some-large-lib'], // 排除不需要预打包的依赖},
});

为了让大家更清晰的区分一些路径配置项，我们来细说一下几个配置项的区别：

  • root：用于指定项目的根目录。Vite 会在这个目录下查找项目的源文件（如 index.html、src 目录等）。默认值是 process.cwd()，即当前工作目录。【指定项目的根目录，影响 Vite 查找项目文件的路径。】

  • base：它通常用于部署应用时，指定应用的根路径。如果你的应用部署在服务器的某个子路径下（例如 https://example.com/my-app/），你可以将 base 设置为 /my-app/。Vite 会将所有的静态资源路径（如 CSS、JS、图片等）都加上 /my-app/ 前缀。例如，原本的 /assets/logo.png 会变成 /my-app/assets/logo.png。【指定应用的公共基础路径，影响静态资源的路径前缀。】

  • resolve.alias：用于为模块路径设置别名，使得在导入模块时可以使用更简洁的路径。例如，你可以将 @ 设置为 src 目录的别名，这样在导入 src 目录下的文件时，可以直接使用 @ 开头，而不需要使用相对路径。通过设置别名，可以避免使用冗长的相对路径，例如从 ../../../src/components/Button 简化为 @/components/Button。

九、总结：为什么选择 Vite？

如果 Webpack 是“前端世界的工厂”，Rollup 是“模块化世界的匠人”，那么 Vite 就像“灵活高效的服务员”。它专注于开发阶段的速度与体验，轻便、友好、快速响应。

开发用 Vite，你会感受到一种从未有过的流畅感。代码改一点，页面瞬间更新；项目大一点，启动依然飞快，让我们从繁重的工具中解放出来。

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

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

相关文章

【动态库.so | 头文件.hpp】基于CMake与CMakeList编写C++自定义库

【动态库.so | 头文件.hpp】基于CMake与CMakeList编写C++自定义库

前言 最近比较忙&#xff0c;其他系列教程得等到年后一起更&#xff01;请大家多多包涵&#xff01;&#xff01;相信各位在配置C环境和各类库的时候一定经常看到如下小连招 git clone https://github.com/opencv/opencv.git cd opencv mkdir build && cd build cma…
阅读更多...
前端编辑器JSON HTML等，vue2-ace-editor，vue3-ace-editor

前端编辑器JSON HTML等，vue2-ace-editor，vue3-ace-editor

与框架无关 vue2-ace-editor有问题&#xff0c;ace拿不到&#xff08;brace&#xff09; 一些组件都是基于ace-builds或者brace包装的 不如直接用下面的&#xff0c;不如直接使用下面的 <template><div ref"editor" class"json-editor"><…
阅读更多...
SpringMVC框架——入门

SpringMVC框架——入门

目录 一、三层框架和MVC 1. 三层架构 2. MVC模型 二、SpringMVC入门案例 1. SpringMVC的概述 2. SpringMVC的入门程序 3. 入门案例的执行过程分析 4. RequestMapping注解 一、三层框架和MVC 1. 三层架构 开发服务器端程序&#xff0c;一般都基于两种形式&#xff0c;一…
阅读更多...
港口智慧应急管理平台：应急先锋，港航卫士

港口智慧应急管理平台：应急先锋，港航卫士

在风云变幻的港航世界&#xff0c;安全是永恒的基石。港口智慧应急管理平台宛如一位无畏的先锋&#xff0c;以智能化、数字化、信息化为利刃&#xff0c;借助 AI 与大数据的神奇力量&#xff0c;为港口保驾护航。 传统应急管理往往在事故发生后被动响应&#xff0c;而此平台却…
阅读更多...
Prime2_解法二：openssl解密凭据

Prime2_解法二：openssl解密凭据

Prime2_解法二&#xff1a;openssl解密凭据 本博客提供的所有信息仅供学习和研究目的&#xff0c;旨在提高读者的网络安全意识和技术能力。请在合法合规的前提下使用本文中提供的任何技术、方法或工具。如果您选择使用本博客中的任何信息进行非法活动&#xff0c;您将独自承担全…
阅读更多...
恢复删除的文件:6个免费Windows电脑数据恢复软件

恢复删除的文件:6个免费Windows电脑数据恢复软件

数据恢复软件可帮助您从众多存储设备中恢复损坏或删除的数据。您可以使用这些文件恢复软件来检索文件、文档、视频、图片等。这些应用程序支持多种标准文件格式&#xff0c;如 PNG、RTF、PDF、HTML、JPG、MP3 等。 经过超过 75 小时的研究&#xff0c;我分析了 25 最佳免费数据…
阅读更多...
爬虫自动化之drissionpage+SwitchyOmega实现随时切换代理ip

爬虫自动化之drissionpage+SwitchyOmega实现随时切换代理ip

本文介绍了如何使用DrizzlePage进行爬虫自动化，并重点讲解了首次启动时设置代理IP以及通过SwitchyOmega插件实现随时切换代理IP的方法。 安装一次，后面调用就不会再去安装了 下载地址：https://github.com/FelisCatus/SwitchyOmega/releases 这两个文件随便那个都可以,下载…
阅读更多...
今天你学C++了吗？——C++中的类与对象（日期类的实现）——实践与知识的碰撞❤

今天你学C++了吗？——C++中的类与对象（日期类的实现）——实践与知识的碰撞❤

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…
阅读更多...
kafka进阶_4.kafka扩展

kafka进阶_4.kafka扩展

文章目录 一、Controller选举二、Kafka集成2.1、大数据应用场景2.1.1、Flume集成2.1.2、Spark集成2.1.3、Flink集成 2.2、Java应用场景(SpringBoot集成) 三、Kafka常见问题3.1、Kafka都有哪些组件&#xff1f;3.2、分区副本AR, ISR, OSR的含义&#xff1f;3.3、Producer 消息重…
阅读更多...
Flink Python作业快速入门

Flink Python作业快速入门

Flink Python快速入门_实时计算 Flink版(Flink)-阿里云帮助中心 import argparse # 用于处理命令行参数和选项&#xff0c;使程序能够接收用户通过命令行传递的参数 import logging import sysfrom pyflink.common import WatermarkStrategy, Encoder, Types from pyflink.data…
阅读更多...
前端（五）css属性

前端（五）css属性

css属性 文章目录 css属性一、字体属性二、文本属性三、背景属性四、盒子模型 一、字体属性 font-weight&#xff1a;文字粗细&#xff0c;在100到900之间&#xff0c;normal(400),bord(700),inherit(继承父类) font-style&#xff1a;文字风格&#xff0c;normal表示正常(默认…
阅读更多...
nginx反向代理（负载均衡）和tomcat介绍

nginx反向代理（负载均衡）和tomcat介绍

nginx的代理 负载均衡 负载均衡的算法 负载均衡的架构 基于ip的七层代理 upstream模块要写在http模块中 七层代理的调用要写在location模块中 轮询 加权轮询 最小连接数 ip_Hash URL_HASH 基于域名的七层代理 配置主机 给其余客户机配置域名 给所有机器做域名映射 四层代理…
阅读更多...
ansible自动化运维（二）playbook模式详解

ansible自动化运维（二）playbook模式详解

相关文章ansible自动化运维&#xff08;一&#xff09;简介及清单,模块-CSDN博客ansible自动化运维&#xff08;三&#xff09;jinja2模板&&roles角色管理-CSDN博客ansible自动化运维&#xff08;四&#xff09;运维实战-CSDN博客 一.Ansible中的playbook模式 Playbo…
阅读更多...
验证码功能实现

验证码功能实现

预览: 前端代码 让图片src 产生验证码图片的servlet <img src""></img> servlet代码 public void checkCode(HttpServletRequest request, HttpServletResponse response) throws IOException {ServletOutputStream os response.getOutputStream()…
阅读更多...
Redis的哨兵机制

Redis的哨兵机制

目录 1. 文章前言2. 基本概念2.1 主从复制的问题2.2 人工恢复主节点故障2.3 哨兵机制自动恢复主节点故障 3. 安装部署哨兵&#xff08;基于docker&#xff09;3.1 安装docker3.2 编排redis主从节点3.3 编排redis-sentinel节点 4. 重新选举5. 选举原理6. 总结 1. 文章前言 &…
阅读更多...
Java:集合(List、Map、Set)

Java:集合(List、Map、Set)

文章目录 1. Collection集合1-1. 迭代器遍历方式1-2. 通过for循环进行遍历1-3. forEach遍历 2. List集合2-1. ArrayList底层实现原理2-2. LinkedList底层实现原理 3. Set集合3-1. HashSet 底层实现3-2. LinkedHashSet 底层实现3-3. TreeSet 4. Collection集合->总结5. Map集…
阅读更多...
什么是Apache日志？为什么Apache日志分析很重要？

什么是Apache日志？为什么Apache日志分析很重要？

Apache是全球最受欢迎的Web服务器软件&#xff0c;支持约30.2%的所有活跃网站。凭借其可靠性、灵活性和强大的功能&#xff0c;Apache数十年来一直是互联网的中坚力量。 一、Apache Web服务器的工作原理 Apache Web服务器的工作原理如下&#xff1a; 接收HTTP请求&#xff1…
阅读更多...
【再谈设计模式】组合模式~层次构建的多面手

【再谈设计模式】组合模式~层次构建的多面手

一、引言 在软件开发的世界里&#xff0c;我们经常面临着处理对象之间复杂关系的挑战。如何有效地表示对象的部分 - 整体层次结构&#xff0c;并且能够以一种统一的方式操作这些对象&#xff0c;是一个值得探讨的问题。组合模式&#xff08;Composite Pattern&#xff09;为我们…
阅读更多...
论文翻译 | ChunkRAG: Novel LLM-Chunk Filtering Method for RAG Systems

论文翻译 | ChunkRAG: Novel LLM-Chunk Filtering Method for RAG Systems

摘要 使用大型语言模型&#xff08;LLM&#xff09;的检索-增强生成&#xff08;RAG&#xff09;系统经常由于检索不相关或松散相关的信息而生成不准确的响应。现有的在文档级别操作的方法无法有效地过滤掉此类内容。我们提出了LLM驱动的块过滤&#xff0c;ChunkRAG&#xff0…
阅读更多...
Redis配置文件中 supervised指令

Redis配置文件中 supervised指令

什么是Supervised&#xff1f; supervised模式允许Redis被外部进程管理器监控。通过这个选项&#xff0c;Redis能够在崩溃后自动重启&#xff0c;确保服务的高可用性。常见的进程管理器包括systemd和upstart。 开启方法 vim修改&#xff1a; sudo vi /etc/redis/redis.conf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023