devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vite: 静态资源在生产环境部署_vite配置图片路径

作者：秋刀鱼在做梦 | 2024-07-28 00:04:49

赞

踩

vite配置图片路径

静态资源在生产环境的处理


1 ）通用的 cdn 前缀

  • 在打包的时候，我们希望本地的图片打包出来的引用使用某个域的前缀
  • 这样，我们可以把打包产物部署到特定的cdn中
  • 在 vite.config.ts 中配置 base
    const isProduction = process.env.NODE_ENV === 'production';
// 填入项目的 CDN 域名地址
const CDN_URL = 'https://xxx.cdn.com';
// 具体配置
{
 base: isProduction ? CDN_URL: '/'
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 配置 .env.development 和 .env.production 分别是 NODE_ENV=development 和 NODE_ENV=production
  • $ pnpm run build打包后，可见
    <link rel="icon" type="image/svg+xml" href="https://xxx.cdn.com/assets/vite-DcBtz0py.svg" />
<script type="module" crossorigin src="https://xxx.cdn.com/assets/index-xyjhVKfF.js"></script>
<link rel="stylesheet" crossorigin href="https://xxx.cdn.com/assets/index-DiwrgTda.css">

    • 1
    • 2
    • 3
  • 看到，这里 图片，js, css 都被打上了cdn的前缀

2 ) 图片托管到其他地址

  • 新增 .env 文件并配置: VITE_IMG_BASE_URL=https://image-cdn.com
  • 进入 src/vite-env.d.ts 增加类型声明
    /// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  // 自定义的环境变量
  readonly VITE_IMG_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 如果某个环境变量要在 Vite 中通过 import.meta.env 访问，那么它必须
    以 VITE_ 开头，如 VITE_IMG_BASE_URL
  • 接下来我们在组件中来使用这个环境变量:
    <img src={new URL('./logo.png', import.meta.env.VITE_IMG_BASE_URL).href} />
  • 在 开发环境 启动项目或者 生产环境 打包后可以看到环境变量已经被替换，地址能
    够正常显示
  • 在打包后的js文件中可见是 src: new URL("./logo.png", "https://image-cdn.com").href

3 ) 打包成单文件或作为base64文件内联

  • 在 Vite 中，所有的静态资源都有两种构建方式
    • 一种是打包成一个单文件
    • 另一种是通过 base64 编码的格式内嵌到代码中
  • 这两种方案到底应该如何来选择呢？
    • 对于比较小的资源，适合内联到代码中，一方面对 代码体积 的影响很小
    • 另一方面可以减少不必要的网络请求， 优化网络性能
    • 而对于比较大的资源，就推荐单独打包成一个文件，而不是内联了
    • 否则可能导致上 MB 的 base64 字符串内嵌到代码中
    • 导致代码体积瞬间庞大，页面加载性能直线下降
  • Vite 中内置的优化方案是下面这样的
    • 如果静态资源体积 >= 4KB，则提取成单独的文件
    • 如果静态资源体积 < 4KB，则作为 base64 格式的字符串内联
    • 上述的 4 KB 即为提取成单文件的临界值
    • 当然，这个临界值你可以通过 build.assetsInlineLimit 自行配置，如下代码所示
      // vite.config.ts
{
   build: {
      // 8 KB
      assetsInlineLimit: 8 * 1024
   }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 注意, svg 格式的文件不受这个临时值的影响，始终会打包成单独的文件
      • 因为它和普通格式的图片不一样，需要动态设置一些属性

4 ) 图片的压缩

  • 图片资源的体积往往是项目产物体积的大头，如果能尽可能精简图片的体积
  • 那么对项目整体打包产物体积的优化将会是非常明显的
  • 在 JavaScript 领域有一个非常知名的图片压缩库 imagemin，作为一个底层的压缩工具
  • 前端的项目中经常基于它来进行图片压缩
  • 比如 Webpack 中大名鼎鼎的 image-webpack-loader
  • 社区当中也已经有了开箱即用的 Vite 插件—— vite-plugin-imagemin ，首先让我们来安装它
    • $ 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
				 }
			    ]
			 }
		})
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • 打包后 $ pnpm run build 可以验证图片压缩非常明显

5 ）雪碧图减少图片的HTTP的请求

5.1 没有优化前

  • 大量的 HTTP1.1 请求会导致网络解析耗时变长，页面加载性能直接受到影响
  • HTTP2 的多路复用设计可以解决大量 HTTP 的请求导致的网络加载性能问题
  • 因此雪碧图技术在 HTTP2 并没有明显的优化效果
  • 一般来说，如果一个组件内有多个svg的图片
    import Logo1 from '@assets/icons/logo-1.svg';
import Logo2 from '@assets/icons/logo-2.svg';
import Logo3 from '@assets/icons/logo-3.svg';
import Logo4 from '@assets/icons/logo-4.svg';
import Logo5 from '@assets/icons/logo-5.svg';

    • 1
    • 2
    • 3
    • 4
    • 5
  • 这样导入不免繁琐，Vite 中提供了 import.meta.glob 的语法糖来解决这种批量导入的问
    题，适合按需加载的场景，如上述的 import 语句可以写成下面这样
    const icons = import.meta.glob('../../assets/icons/logo-*.svg');

    • 1
  • 同样，如果要同步的导入，则可以使用 import.meta.globEager
    const icons = import.meta.globEager('../../assets/icons/logo-*.svg');

    • 1
  • 即便以上两种提供了写法上的方便，但是仍旧会有很多的网络请求，我们想要减少这些请求

5.2 使用雪碧图优化

  • 通过 vite-plugin-svg-icons 来实现这个方案，首先安装一下这个插件
    • $ 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')]
 		})
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 在 src/components 目录下新建 SvgIcon 组件:
    // SvgIcon/index.tsx
export interface SvgIconProps {
  name?: string;
  prefix: string;
  color: string;
  [key: string]: string;
}

export default function SvgIcon({
  name,
  prefix = 'icon',
  color = '#333',
  ...props
}: SvgIconProps) {
  const symbolId = `#${prefix}-${name}`;
  return (
    <svg {...props} aria-hidden="true">
	   <use href={symbolId} fill={color} />
    </svg>
  );
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 在一个组件中应用 SvgIcon
    const icons = import.meta.globEager('../../assets/icons/logo-*.svg');
const iconUrls = Object.values(icons).map((mod) => {
	 // 如 ../../assets/icons/logo-1.svg -> logo-1
	 const fileName = mod.default.split('/').pop();
	 const [svgName] = fileName.split('.');
	 return svgName;
});

// 渲染 svg 组件
{iconUrls.map((item) => (
 	<SvgIcon name={item} key={item} width="50" height="50" />
))}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
  • 在 src/main.tsx 文件中添加一行代码 import 'virtual:svg-icons-register';
  • 回到浏览器，雪碧图已经生成，注意，雪碧图包含了所有图标的具体内容
  • 而对于页面每个具体的图标，则通过 use 属性来引，用雪碧图的对应内容:
  • 如此一来，我们就能将所有的 svg 内容都内联到 HTML 中，省去了大量 svg 的网络请求
  • SVG Sprite 示例，参考一个 SVG Sprite 文件，例如 icons.svg
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">  
  <symbol id="icon-home" viewBox="0 0 24 24">  
    <!-- Home 图标的内容 -->  
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>  
  </symbol>  
  <symbol id="icon-search" viewBox="0 0 24 24">  
    <!-- Search 图标的内容 -->  
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>  
  </symbol>  
  <!-- 更多图标... -->  
</svg>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 使用 元素引用图标, 在你的 HTML 或 Vue 组件中，可以使用 元素来引用 SVG Sprite 中的特定图标： 
    <svg class="icon">  
  <use xlink:href="icons.svg#icon-home"></use>  
</svg>  
  
<svg class="icon">  
  <use xlink:href="icons.svg#icon-search"></use>  
</svg>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/892148
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号