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

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

news 来源：原创 2024/7/2 21:16:53

概述

随着前端技术的飞速发展，项目规模和复杂度不断增加，如何高效地处理静态资源成为了提升开发效率和应用性能的关键
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，作为一个现代化的构建工具，为开发者提供了一套强大的静态资源处理机制