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