RL-Notes

Appearance

On this page

vite(assets) ​

静态资源问题 1.资源加载 2.生产性能

图片加载 ​

使用场景 ​

<img src="../../assets/a.png"></img>
background: url('../../assets/b.png') norepeat;
document.getElementById('hero-img').src = '../../asset/c.png'

vite 中使用 ​

别名

// vite.config.ts
import path from 'path';

{
  resolve: {
    // 别名配置
    alias: {
      '@assets': path.join(__dirname, 'src/assets')
    }
  }
}

以上 3 中情况都可以

图片.png

SVG 加载 ​

// vite.config.ts
import svgr from 'vite-plugin-svgr';

{
  plugins: [
    // 其它插件省略
    svgr()
  ]
}
//ts.config.json
{
  "compilerOptions": {
    // 省略其它配置
    "types": ["vite-plugin-svgr/client"]
  }
}
import { ReactComponent as ReactLogo } from '@assets/icons/logo.svg';

export function Header() {
  return (
    // 其他组件内容省略
     <ReactLogo />
  )
}

JSON ​

图片.png

worker ​

import Worker from './example.js?worker';
// 1. 初始化 Worker 实例
const worker = new Worker();
// 2. 主线程监听 worker 的信息
worker.addEventListener('message', (e) => {
  console.log(e);
});

Web Assembly 文件 ​

// Header/index.tsx
import init from './fib.wasm';

type FibFunc = (num: number) => number;

init({}).then((exports) => {
  const fibFunc = exports.fib as FibFunc;
  console.log('Fib result:', fibFunc(10));
});

其他 ​

图片.png

特殊资源后缀 ​

图片.png

生产 ​

1. 自定义部署域名 ​

图片.png 单独使用其他域名

<img src={new URL('./logo.png', import.meta.env.VITE_IMG_BASE_URL).href} />

定义.env.development .env.production,使用同一变量，在开发和生产阶段静态替换

2. 单文件 or 内联 ​

// vite.config.ts
{
  build: {
    // 8 KB
    assetsInlineLimit: 8 * 1024
  }
}

3.图片压缩 ​

pnpm i vite-plugin-imagemin -D
//vite.config.ts
import viteImagemin from 'vite-plugin-imagemin';

{
  plugins: [
    // 忽略前面的插件
    viteImagemin({
      // 无损压缩配置，无损压缩下图片质量不会变差
      optipng: {
        optimizationLevel: 7
      },
      // 有损压缩配置，有损压缩下图片质量可能会变差
      pngquant: {
        quality: [0.8, 0.9],
      },
      // svg 优化
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ]
}

雪碧图 ​

批量导入语法糖

图片.png

pnpm i vite-plugin-svg-icons -D
// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

{
  plugins: [
    // 省略其它插件
    createSvgIconsPlugin({
      iconDirs: [path.join(__dirname, 'src/assets/icons')]
    })
  ]
}

图片.png