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，作为一个现代化的构建工具，为开发者提供了一套强大的静态资源处理机制