当前位置: 首页 > news >正文

Vite: 关于静态资源的处理机制

概述

  • 随着前端技术的飞速发展,项目规模和复杂度不断增加,如何高效地处理静态资源成为了提升开发效率和应用性能的关键
  • Vite,作为新一代前端构建工具,以其轻量级、快速启动和热更新著称,同时也为静态资源的管理和优化提供了先进的解决方案

静态资源处理


1 )图片的处理

1.1 vite 的配置

  • 图片存储在同一个位置,则可以对图片源目录进行别名的配置
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import path from 'path'// https://vitejs.dev/config/
    export default defineConfig({root: path.join(__dirname, 'src'),plugins: [react()],resolve: {// 别名配置alias: {'@assets': path.join(__dirname, 'src/assets') // 注意这里}}
    })
    
  • 基于以上,这样 Vite 在遇到 @assets 路径的时候
  • 会自动帮我们定位至根目录下的 src/assets 目录
  • 值得注意的是,alias 别名配置不仅在 JavaScript 的 import 语句中生效
  • 在 CSS 代码的 @import 和 url 导入语句中也同样生效
    • 注意,请不要在js代码的字符串中使用 @assets/xxx.png 这样的语法
    • 因为这样写它永远是字符串,而找不到此类的地址

1.2 使用

  • js 中 import 使用

    import logoSrc from '@assets/imgs/vite.png';// 方式一
    export function Header() {return (<div><img src={logoSrc} alt="" /></div>);
    }// 方式二
    export function Header() {useEffect(() => {const img = document.getElementById('logo') as HTMLImageElement;img.src = logoSrc;}, []);return (<div><img id="logo" alt="" /></div>);
    }
    
  • css 中直接使用

    background: url('@assets/imgs/background.png') no-repeat;
    

1.3. svg补充

  • 默认已经可以导入 svg 了,但是如果希望能将 svg 当做一个组件来引入,这样我们可以很方
    便地修改 svg 的各种属性,而且比 img 标签的引入方式更加优雅
  • 参考
    • https://github.com/pd4d10/vite-plugin-svgr
    • https://github.com/pakholeung37/vite-plugin-vue2-svg
    • https://github.com/pd4d10/vite-plugin-svgr

2 ) JSON 的处理

2.1 走默认的配置

  • 默认直接支持
    import { version } from '../package.json';function App() {useEffect(() => {return () => {console.log('组件即将卸载', version);};}, []); // 空数组保证了这个effect只在组件挂载时执行一次return (<><div>123</div></>)
    }export default App
    

2.2 配置禁止按名导入

  • 也可以在配置文件禁用按名导入的方式, 在 vite 中配置
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import path from 'path'// https://vitejs.dev/config/
    export default defineConfig({root: path.join(__dirname, 'src'),plugins: [react()],resolve: {// 别名配置alias: {'@assets': path.join(__dirname, 'src/assets')}},json: {stringify: true // 注意这里}
    })
    
  • 使用
    import pkg from '../package.json';function App() {useEffect(() => {return () => {console.log('组件即将卸载', pkg.version);};}, []); // 空数组保证了这个effect只在组件挂载时执行一次return (<><div>123</div></>)
    }export default App
    

4 )work 脚本的处理

  • 定义一个 a-work.js 文件
    let count = 0;setInterval(() => {// 给主线程传值postMessage(++count);}, 2000);
    
  • 使用 work 文件,引入的时候注意加上 ?worker 后缀,相当于告诉 Vite 这是一个 Web Worker 脚本文件
    import Worker from './a-work.js?worker';
    // 1. 初始化 Worker 实例
    const worker = new Worker();
    // 2. 主线程监听 worker 的信息
    worker.addEventListener('message', (e) => {console.log(e);
    });
    

5 ) Web Assembly 脚本的处理

  • 定义一个 Vite 对于 .wasm 文件也提供了开箱即用的支持,定义 fib.wasm 文件

    export function fib(n) {var a = 0, b = 1;if (n > 0) {while (--n) {let t = a + b;a = b;b = t;}return b;}return a;
    }
    
  • 使用

    import init from './fib.wasm';
    type FibFunc = (num: number) => number;init({}).then((exports) => {const fibFunc = exports.fib as FibFunc;console.log('Fib result:', fibFunc(5));
    });
    
  • Vite 会对 .wasm 文件的内容进行封装,默认导出为 init 函数

  • 这个函数返回一个 Promise,因此我们可以在其 then 方法中拿到其导出的成员—— fib 方法

6 )其它静态资源

  • 除了上述的一些资源格式,Vite 也对下面几类格式提供了内置的支持:
    • 媒体类文件,包括 mp4 、 webm 、 ogg 、 mp3 、 wav 、 flac 和 aac
    • 字体类文件。包括 woff 、 woff2 、 eot 、 ttf 和 otf
    • 文本类。包括 webmanifest 、 pdf 和 txt
  • 也就是说,你可以在 Vite 将这些类型的文件当做一个 ES 模块来导入使用
  • 如果你的项目中还存在其它格式的静态资源,可以通过 assetsInclude 配置让 Vite 来支持加载:
    // vite.config.ts
    {assetsInclude: ['.gltf']
    }
    

7 ) 特殊资源后缀

  • Vite 中引入静态资源时,也支持在路径最后加上一些特殊的 query 后缀,包括:
    • ?url : 表示获取资源的路径,这在只想获取文件路径而不是内容的场景将会很有用。
    • ?raw : 表示获取资源的字符串内容,如果你只想拿到资源的原始内容,可以使用这个
    • ?inline : 表示资源强制内联,而不是打包成单独的文件

总结

  • 上面,我们总结了 Vite如何处理图片、字体、CSS、JavaScript、 JSON 、Worker 文件 、 Web Assembly等文件等静态资源,以及如何利用其特性提升开发体验和生产环境性能
  • 而静态资源本身并不是标准意义上的模块,因此对它们的处理和普通的代码是需要区别对
    待的,一方面我们需要解决资源加载的问题,对 Vite 来说就是如何将静态资源解析并加
    载为一个 ES 模块的问题
  • 另一方面在生产环境下我们还需要考虑静态资源的部署问题、体积问题、网络性能问题,并采取相应的方案来进行优化
  • Vite,作为一个现代化的构建工具,为开发者提供了一套强大的静态资源处理机制

相关文章:

Vite: 关于静态资源的处理机制

概述 随着前端技术的飞速发展&#xff0c;项目规模和复杂度不断增加&#xff0c;如何高效地处理静态资源成为了提升开发效率和应用性能的关键Vite&#xff0c;作为新一代前端构建工具&#xff0c;以其轻量级、快速启动和热更新著称&#xff0c;同时也为静态资源的管理和优化提…...

React之useEffect

在React中&#xff0c;useEffect 是一个非常重要的Hook&#xff0c;它用于管理副作用操作。副作用指的是那些不直接与组件渲染相关的操作&#xff0c;例如数据获取、订阅、手动DOM操作等。本文将详细介绍 useEffect 的概念、基础使用、参数说明以及如何清除副作用&#xff0c;并…...

测试辅助工具(抓包工具)的使用3 之 弱网测试

1.为什么要进行弱网测试&#xff1f; 1.带宽1M和带宽100M打开tpshop网站效果一样吗&#xff1f; 2.手机使用2G网络和使用3G网络打开京东的效果一样吗&#xff1f; 弱网环境下&#xff0c;出现丢包、延时软件的处理机制&#xff0c;避免造成用户的流失。 2.如何进行弱网测试&…...

【Redis】基于Redission实现分布式锁(代码实现)

目录 基于Redission实现分布式锁解决商品秒杀超卖的场景&#xff1a; 1.引入依赖&#xff1a; 2.加上redis的配置&#xff1a; 3.添加配置类&#xff1a; 4.编写代码实现&#xff1a; 5.模拟服务器分布式集群的情况&#xff1a; 1.右键点击Copy Configuration 2.点击Modi…...

websocket 安全通信

WebSocket 协议 WebSocket&#xff1a;在 2008 年诞生&#xff0c;2011 年成为国际标准。它允许服务器主动向客户端推送信息&#xff0c;客户端也可以主动向服务器发送信息&#xff0c;实现了真正的双向平等对话。它是一种在单个 TCP 连接上进行全双工通讯的协议&#xff0c;能…...

代码生成技术技术-janino

文章目录 背景简单例子flink 例子 背景 代码生成技术适合在需要动态代码编译的场景中使用。比如大数据计算场景下&#xff0c;经常会要把flink sql 转成实际的执行计划 简单例子 代码是一个string 类型&#xff0c;直接用janino 编译后&#xff0c;就可以得到加载到jvm里的c…...

QT事件处理系统之四:自定义事件的注册及拦截、发送

1、自定义事件的注册 自定义事件对象 自定义的事件类必须继承自QEvent,并且无需指定父类 自定义的事件类必须拥有全局唯一的Type值,使用QEvent::User+value即可。 class MyEvent : public QEvent {public:MyEvent();QString getStr() {...

vs2022 studio控制台出现中文乱码解决

vs2022 studio控制台出现中文乱码解决 问题解决 问题 这里cout中间的中文&#xff0c;但控制台出现的是乱码对此需要进行修改 解决 打开运行的主文件&#xff0c;也就是整个程序的入口&#xff0c;对他另存为 之后点击编码保存 接着将编码保存的格式变为图片对应的这种 记…...

支持向量机介绍

一、引言 1.支持向量机&#xff08;SVM&#xff09;的概念和背景 支持向量机&#xff08;Support Vector Machine&#xff0c;简称SVM&#xff09;是一种起源于统计学习理论的分类和回归算法。20世纪60年代&#xff0c;Vapnik等人提出了支持向量机理论&#xff0c;该理论基…...

电压互感器在线监测的原理

电压互感器在线监测的原理主要基于电磁感应、电场效应以及一系列先进的监测技术。以下是对其原理的详细解释&#xff1a; 一、电磁感应原理 电压互感器&#xff08;Voltage Transformer&#xff0c;简称VT&#xff09;本质上是一种降压变压器&#xff0c;它利用电磁感应的原理…...

算法训练与程序竞赛题目集合(L4)

目录 L4-103 就不告诉你 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; L4-104 Wifi密码 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; L4-105 冠军魔术 输入格式&#xff1a; …...

Selenium进行Web自动化测试

Selenium进行Web自动化测试 SeleniumPython实现Web自动化测试一、环境配置 SeleniumPython实现Web自动化测试 一、环境配置 环境基于win10&#xff08;X64&#xff09; 安装Python&#xff1b;安装PyCham安装chomedriver chomedriver下载地址 可以查看本地chrome软件版本下载…...

模拟算法讲解

模拟算法是一种基于实际情况模拟的算法&#xff0c;通过模拟现实世界中的系统或过程&#xff0c;来研究它们的性质和行为。模拟算法可以用于解决各种问题&#xff0c;包括物理模拟、经济模拟、社会模拟等。 模拟算法的基本步骤包括&#xff1a; 定义问题&#xff1a;明确需要模…...

Leetcode 3196. Maximize Total Cost of Alternating Subarrays

Leetcode 3196. Maximize Total Cost of Alternating Subarrays 1. 解题思路2. 代码实现 题目链接&#xff1a;3196. Maximize Total Cost of Alternating Subarrays 1. 解题思路 这一题就是一个动态规划&#xff0c;只需要考虑每一个元素作为开始和处于序列当中的二元态即可…...

Elasticsearch**Elasticsearch自定义插件开发入门

Elasticsearch作为一个强大的搜索引擎和数据分析工具&#xff0c;其强大的扩展性是其受欢迎的重要原因之一。自定义插件开发入门** Elasticsearch作为一个强大的搜索引擎和数据分析工具&#xff0c;其强大的扩展性是其受欢迎的重要原因之一。通过自定义插件&#xff0c;用户可…...

在Ubuntu中创建Ruby on Rails项目并搭建数据库

新建Rails项目 先安装bundle Ruby gem依赖项工具&#xff1a; sudo apt install bundle 安装Node.js: sudo apt install nodejs 安装npm 包管理器&#xff1a; sudo apt install npm 安装yarn JavaScript包管理工具&#xff1a; sudo apt install yarn 安装webpacker: …...

微信小程序反编译 2024 unveilr.exe

ps&#xff1a;一开始用的反编译工具是wxappUnpacker&#xff0c;后面改为 unveilr.exe 1.先找到小程序安装目录“E:\聊天记录\WeChat Files\Applet”&#xff0c;要反编译小程序的包 文件夹下的名字对应的是小程序ID&#xff0c;如果不确定是哪个&#xff0c;可以删除->打…...

测试测量-DMM直流精度

测试测量-DMM直流精度 最近去面试&#xff0c;发现了自己许多不足&#xff0c;比如我从未考虑过万用表准或者不准&#xff0c;或者万用表有多准&#xff1f; 在过去的实验室中&#xff0c;常用的DMM有KEYSIGHT 34401A以及 KEITHLEY THD2015&#xff0c;就以这两台为例&#x…...

AGV机器人的调度开发分析(2)- 内核中的调度

我们开发AGV的调度系统&#xff0c;最重要的是要实现调度的运行&#xff0c;那么调度要执行哪些任务呢&#xff1f; 先来看看德国开发的开源openTCS中的功能定义&#xff1a; openTCS的控制核心是kernel&#xff0c;目的是提供运输系统/工厂的抽象驾驶模型&#xff0c;管理运…...

HTTP详细总结

概念 HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点 基于TCP协议: 面向连接&#xff0c;安全 TCP是一种面向连接的(建立连接之前是需要经过三次握手)、可靠的、基于字节流的传输层通信协议&#xff0c;在…...

别再被空白页坑了!用html2canvas + print-js打印Vue/React组件,保姆级避坑指南

彻底解决前端组件打印难题&#xff1a;html2canvas与print-js深度整合实践 在管理后台、数据报表等企业级应用中&#xff0c;精确打印特定组件是刚需&#xff0c;但现代前端框架的组件化特性让这个"简单需求"变得异常棘手。当你的Vue/React组件在屏幕上完美呈现&…...

ProfControl V8的介绍 组合成为模板

作者&#xff1a;刘凌波链接&#xff1a;环野电子, profcontrolhttp://oa.profcontrol.cn/teaching_V8-7926f783c6.html来源&#xff1a;ProfControl组合为模版1、按下SHIFT键&#xff0c;在地图区域空白处按下鼠标左键不松开&#xff0c;移动鼠标则进入框选模式&#xff0c;让…...

Phi-4-mini-reasoning 128K上下文应用创新:法律条文交叉引用推理案例

Phi-4-mini-reasoning 128K上下文应用创新&#xff1a;法律条文交叉引用推理案例 1. 模型简介与核心能力 Phi-4-mini-reasoning 是一个轻量级开源模型&#xff0c;专注于高质量推理任务。作为Phi-4模型家族成员&#xff0c;它通过合成数据训练和微调&#xff0c;特别擅长处理…...

别再只会让舵机转圈了!用Arduino和SG90实现精准角度控制的保姆级教程

从转圈到精准控制&#xff1a;Arduino与SG90舵机的高级应用指南 第一次接触舵机时&#xff0c;我们往往满足于让它简单地来回转动——这确实很有趣&#xff0c;就像给玩具注入了生命。但当你真正想用它构建一个机械臂、智能云台或是自动喂食器时&#xff0c;这种粗放的控制方式…...

当条形图遇上极坐标:径向与圆形条形图的视觉革命

1. 设计原理这两种图表把传统的笛卡尔坐标系换成极坐标系&#xff1a;角度表示类别&#xff0c;半径或角度长度表示数值。1.1. 径向条形图径向条形图本质上是将传统条形图的直角坐标系转换为极坐标系。在极坐标系中&#xff0c;每个数据点不再由(x, y)定位&#xff0c;而是由(角…...

LangChain、LangFlow、LangGraph:一文讲清三大 LLM 框架的定位与差异

01 | LangChain&#xff1a;LLM 应用的“基础设施层”① LangChain 是什么&#xff1f;LangChain 是一个用于构建 LLM 应用的通用框架&#xff0c;核心目标只有一句话&#xff1a;把「大模型 外部工具 数据源 Prompt」系统化地组织起来。它并不是一个“产品”&#xff0c;而…...

告别“傻跟车”:聊聊PLUTO如何用对比学习让自动驾驶学会“思考”与“决策”

告别“傻跟车”&#xff1a;PLUTO如何用对比学习重塑自动驾驶决策逻辑 清晨的都市高架上&#xff0c;一辆银色轿车正以恒定车距跟随前车匀速行驶。当领头车辆突然急刹时&#xff0c;这辆搭载最新PLUTO系统的自动驾驶汽车并未机械复制前车动作&#xff0c;而是同步检测到百米外转…...

用Python和Geogebra手把手复现阿克曼转向模型(附完整代码与可视化)

用Python和Geogebra手把手复现阿克曼转向模型&#xff08;附完整代码与可视化&#xff09; 在自动驾驶和机器人领域&#xff0c;理解车辆如何转向是基础中的基础。但当你第一次看到那些复杂的公式时&#xff0c;是不是感觉像在看天书&#xff1f;别担心&#xff0c;今天我们就用…...

GitHub加速完全指南:从诊断到优化的全方位解决方案

GitHub加速完全指南&#xff1a;从诊断到优化的全方位解决方案 【免费下载链接】gh-proxy github release、archive以及项目文件的加速项目 项目地址: https://gitcode.com/gh_mirrors/gh/gh-proxy GitHub作为全球最大的代码托管平台&#xff0c;其访问速度直接影响开发…...

BGE-Large-Zh前沿探索:量子计算语义编码实验

BGE-Large-Zh前沿探索&#xff1a;量子计算语义编码实验 引言 量子计算正在重新定义计算的边界&#xff0c;而自然语言处理作为人工智能的核心领域&#xff0c;也迎来了与量子技术融合的历史性机遇。我们进行了一项创新实验&#xff1a;将BGE-Large-Zh这一强大的语义编码模型…...