解锁前端开发速度的秘密武器【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 可使局域网访问
    // 端口号，默认 5173
    port: 3000, 
    // 是否在浏览器中自动打开
    open: true, 
    // 是否启用 HTTPS
    https: false,
    // 配置代理规则
    proxy: {
      '/api': {
        // 代理目标地址
        target: 'https://api.example.com',
        // 是否更改请求源，修改为目标服务器的域名或 IP 地址
        changeOrigin: true,
        // 重写路径
        rewrite: (path) => path.replace(/^\/api/, ''), 
      },
    },
  },
​
  // 构建配置
  build: {
    // 输出目录，默认是 dist
    outDir: '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，你会感受到一种从未有过的流畅感。代码改一点，页面瞬间更新；项目大一点，启动依然飞快，让我们从繁重的工具中解放出来。

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

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

相关文章

AI发展与LabVIEW程序员就业

AI发展与LabVIEW程序员就业

人工智能&#xff08;AI&#xff09;技术的快速发展确实对许多行业带来了变革&#xff0c;包括自动化、数据分析、软件开发等领域。对于LabVIEW程序员来说&#xff0c;AI的崛起确实引发了一个值得关注的问题&#xff1a;AI会不会取代他们的工作&#xff0c;导致大量失业&#x…
阅读更多...
决策曲线分析（DCA）中平均净收益用于评价模型算法（R自定义函数）

决策曲线分析（DCA）中平均净收益用于评价模型算法（R自定义函数）

决策曲线分析&#xff08;DCA&#xff09;中平均净收益用于评价模型算法 DCA分析虽然不强调用来评价模型算法或者变量组合的优劣&#xff0c;但是实际应用过程中感觉DCA曲线的走势和模型的效能具有良好的一致性&#xff0c;其实这种一致性也可以找到内在的联系&#xff0c;比如…
阅读更多...
【Linux】：多线程（POSIX 信号量 、基于环形队列的生产消费者模型）

【Linux】：多线程（POSIX 信号量 、基于环形队列的生产消费者模型）

&#x1f4c3;个人主页&#xff1a;island1314 ​​ &#x1f525;个人专栏&#xff1a;Linux—登神长阶 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&#x1f3fd;留言 &#x1f60d;收藏 &#x1f49e; &#x1f49e; &#x1f49e; 目录 1. POSIX 信号量…
阅读更多...
人工智能的历史概况和脉络

人工智能的历史概况和脉络

人工智能( AI ) 的历史始于古代&#xff0c;当时有神话、故事和谣言称&#xff0c;人工生物被工匠大师赋予了智慧或意识。从古代到现在&#xff0c;对逻辑和形式推理的研究直接导致了20 世纪 40 年代可编程数字计算机的发明&#xff0c;这是一种基于抽象数学推理的机器。这种设…
阅读更多...
昇思25天学习打卡营第33天|共赴算力时代

昇思25天学习打卡营第33天|共赴算力时代

文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。…
阅读更多...
基于32单片机的RS485综合土壤传感器检测土壤PH、氮磷钾的使用（超详细）

基于32单片机的RS485综合土壤传感器检测土壤PH、氮磷钾的使用（超详细）

1-3为RS485综合土壤传感器的基本内容 4-5为基于STM32F103C8T6单片机使用RS485传感器检测土壤PH、氮磷钾并显示在OLED显示屏的相关配置内容 注意&#xff1a;本篇文件讲解使用的是PH、氮磷钾四合一RS485综合土壤传感器&#xff0c;但里面的讲解内容适配市面上的所有多合一的RS…
阅读更多...
Vue入门到精通：运行环境

Vue入门到精通：运行环境

Vue入门到精通&#xff1a;运行环境 Vue3的运行环境搭建主要有两种方法&#xff1a;一种是直接在页面中引入Vue库&#xff0c;另一种是通过脚手架工具创建Vue项目。 &#xff08;一&#xff09;页面直接引入Vue库 页面直接引入Vue库的方法&#xff0c;是指在HTML网页中通过s…
阅读更多...
PHP项目从 php5.3 版本升级到 php8.3 版本时的一些问题和解决方法记录

PHP项目从 php5.3 版本升级到 php8.3 版本时的一些问题和解决方法记录

一个原来的项目&#xff0c;因为业务需要&#xff0c;进行了PHP版本升级&#xff0c;从php5.3直接升级到php8.3。变化挺大的&#xff0c;原程序中有很多不再兼容&#xff0c;在此处进行一下记录。 一、Deprecated: 显式转换问题 报错内容&#xff1a;Deprecated: Implicit con…
阅读更多...
【Python篇】PyQt5 超详细教程——由入门到精通（序篇）

【Python篇】PyQt5 超详细教程——由入门到精通（序篇）

文章目录 PyQt5 超详细入门级教程前言序篇&#xff1a;1-3部分&#xff1a;PyQt5基础与常用控件第1部分&#xff1a;初识 PyQt5 和安装1.1 什么是 PyQt5&#xff1f;1.2 在 PyCharm 中安装 PyQt51.3 在 PyCharm 中编写第一个 PyQt5 应用程序1.4 代码详细解释1.5 在 PyCharm 中运…
阅读更多...
Apache Kylin最简单的解析、了解

Apache Kylin最简单的解析、了解

官网&#xff1a;Overview | Apache Kylin 一、Apache Kylin是什么&#xff1f; 由中国团队研发具有浓厚的中国韵味&#xff0c;使用神兽麒麟&#xff08;kylin&#xff09;为名 的一个OLAP多维数据分析引擎:&#xff08;据官方给出的数据&#xff09; 亚秒级响应&#xff…
阅读更多...
【工具】linux matlab 的使用

【工具】linux matlab 的使用

问题1 - 复制图表 在使用linux matlab画图后&#xff0c;无法保存figure。 例如在windows下 但是在linux下并没有这个“Copy Figure”的选项。 这是因为 “ The Copy Figure option is not available on Linux systems. Use the programmatic alternative.” 解决方案&…
阅读更多...
opencv——（图像梯度处理、图像边缘化检测、图像轮廓查找和绘制、透视变换、举例轮廓的外接边界框）

opencv——（图像梯度处理、图像边缘化检测、图像轮廓查找和绘制、透视变换、举例轮廓的外接边界框）

一、图像梯度处理 1 图像边缘提取 cv2.filter2D(src, ddepth, kernel[, dst[, anchor[, delta[, borderType]]]]) 功能&#xff1a;用于对图像进行卷积操作。卷积是图像处理中的一个基本操作&#xff0c;它通过一个称为卷积核&#xff08;或滤波器&#xff09;的小矩阵在图像上…
阅读更多...
Redis - 集合 Set 及代码实战

Redis - 集合 Set 及代码实战

Set 类型 定义&#xff1a;类似 Java 中的 HashSet 类&#xff0c;key 是 set 的名字&#xff0c;value 是集合中的值特点 无序元素唯一查找速度快支持交集、并集、补集功能 常见命令 命令功能SADD key member …添加元素SREM key member …删除元素SCARD key获取元素个数SI…
阅读更多...
androidstudio导入项目至成功运行（保姆级教程）

androidstudio导入项目至成功运行（保姆级教程）

目录 一、下载资源包 二、创建一个新的项目 三、替换配置文件 四、打开Android Studio 一、下载资源包 将你得到的资源包下载到你能够找到的位置然后解压&#xff0c;方便操作 二、创建一个新的项目 如果已经有新创建的项目就不用新建了&#xff0c;但是需要注意的是&am…
阅读更多...
SpringBoot SPI

SpringBoot SPI

参考 https://blog.csdn.net/Peelarmy/article/details/106872570 https://javaguide.cn/java/basis/spi.html#%E4%BD%95%E8%B0%93-spi SPI SPI(service provider interface)是JDK提供的服务发现机制。以JDBC为例&#xff0c;JDK提供JDBC接口&#xff0c;在包java.sql.*。MY…
阅读更多...
linux部署ansible自动化运维

linux部署ansible自动化运维

ansible自动化运维 1&#xff0c;编写ansible的仓库&#xff08;比赛已经安装&#xff0c;无需关注&#xff09; 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上&#xff08;右下角呈绿色状态&#xff09; 3、查看光盘挂载信息 df -h…
阅读更多...
Java——网络编程(中)—TCP通讯(上)

Java——网络编程(中)—TCP通讯(上)

一 (网络编程常用类) (Java为了跨平台&#xff0c;在网络应用通信时是不允许直接调用操作系统接口的&#xff0c;而是由java.net包来提供网络功能。下面来介绍几个java.net包中的常用的类) 1 InetAddress类的使用 (封装计算机的IP地址和DNS) (这个类没有构造方法——>如…
阅读更多...
SQL server学习05-查询数据表中的数据（上）

SQL server学习05-查询数据表中的数据（上）

目录 一&#xff0c;基本格式 1&#xff0c;简单的SQL查询语句 2&#xff0c;关键字TOP 3&#xff0c;关键字DISTINCT 二&#xff0c;模糊查询 1&#xff0c;通配符 三&#xff0c;对结果集排序 1&#xff0c;不含关键字DISTINCT 2&#xff0c;含关键字DISTINCT 3&…
阅读更多...
Gitlab ci/cd

Gitlab ci/cd

关于gitlab ci/cd&#xff0c;就是实现DevOps的能力&#xff0c;即Development &Operations的缩写&#xff0c;也就是开发&运维。CI/CD 指的是软件开发的持续集成方法&#xff0c;我们可以持续构建、测试和部署软件。通过持续方法的迭代能使得我们减少在错误代码或者错…
阅读更多...
Leetcode42-环形链表

Leetcode42-环形链表

题目 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使…
阅读更多...
最新文章

Copyright @ 2022~2023