Vite: 静态资源在生产环境部署

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

1）通用CDN前缀

打包时，您希望在本地映像打包引用中使用特定的域前缀。这样您就可以将打包的产品部署到特定的CDN 并在vite.config.ts isProduction=process.env.NODE_ENV 中设置Baseconst。===\’生产\’;

//输入您项目的CDN域名地址

const CDN_URL=\’https://xxx.cdn.com\’;

//具体设置

{

Base: 是CDN_URL: \’/\’

}

将.env.development 和.env.Production 分别设置为NODE_ENV=development 和NODE_ENV=product $ pnpm run build 打包后显示链接rel=\’icon\’ type=\’image/svg+xml\’ href=\’https://xxx。 cdn.com /assets/vite-DcBtz0py.svg\’/

script type=\’module\’ 跨域src=\’https://xxx.cdn.com/assets/index-xyjhVKfF.js\’/script

链接rel=\’stylesheet\’crossorigin href=\’https://xxx.cdn.com/assets/index-DiwrgTda.css\’

这里的图片、js、css都以cdn为前缀。

2）将图像托管在另一个地址上

添加新的.env文件，将： VITE_IMG_BASE_URL=https://image-cdn.com设置为src/vite-env.d.ts，并添加类型声明。 ///参考表=\’vite/client\’/

接口ImportMetaEnv {

只读VITE_APP_TITLE: 字符串；

//自定义环境变量

只读VITE_IMG_BASE_URL: 字符串；

}

接口导入元{

只读env: ImportMetaEnv；

}

如果您想通过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 是一个重要的值。这个重要的值可以通过构建传递，如以下代码所示。 assetInlineLimit 是自行配置的。 //vite.config.ts

{

构建： {

//8KB

资产内线限制： 8 * 1024

}

}

请注意，svg 格式的文件不受此临时值的影响，并且始终打包在单独的文件中，这与常规格式图像不同，后者需要动态设置一些属性。

4）图像压缩

在JavaScript领域，图片资源量往往占据了项目产品量的很大一部分。显然，如果您可以尽可能地简化图像数量，您将优化项目的打包产品的总量。这是一个非常知名的图像压缩库imagemin。前端项目中经常使用底层压缩工具进行图像压缩。例如，Webpack 著名的image-webpack-loader 社区已经拥有一个开箱即用的库。 -box Vite plugin —— vite-plugin-imagemin 首先，我们来安装它。

$ pnpm i vite-plugin-imagemin -D vite.config.ts 从配置文件中的“vite-plugin-imagemin”导入viteImagemin。

//具体设置如下

{

插件： [

//忽略之前的插件

viteImagemin({

//可逆压缩配置，即使可逆压缩图像质量也不会恶化

optipng: {

优化级别： 7

},

//有损压缩配置，有损压缩可能导致图像质量下降

pngquant: {

质量： [0.8, 0.9],

},

//SVG 优化

svgo: {

插件： [

{

name: \’删除视图框\’

},

{

name: \’删除空属性\’,

active: 假

}

]

}

})

]

}

打包后，运行$ pnpm run build 可以看到图片压缩非常明显。

5) 精灵图片减少了图片的HTTP请求。

5.1 优化前

大量的HTTP1.1请求需要时间来分析网络，这直接影响页面加载性能。因此，HTTP2的复用设计可以解决大量HTTP请求带来的网络负载性能问题。一般来说，如果您的组件有多个SVG 图像，请从“@assets/icons/logo-1.svg”导入Logo1。

从“@assets/icons/logo-2.svg”导入Logo2。

从“@assets/icons/logo-3.svg”导入Logo3。

从“@assets/icons/logo-4.svg”导入Logo4。

从“@assets/icons/logo-5.svg”导入Logo5。

这种导入很乏味。 Vite 提供了一个名为import.meta.glob 的语法来解决这个批量导入问题。

例如，上面的import 语句可以写成： const icon=import.meta.glob(\’././assets/icons/logo-*.svg\’);

同样，如果您想要同步导入，可以使用import.meta.globEagerconst Icons=import.meta.globEager(\’././assets/icons/logo-*.svg\’);

虽然以上两种方式在书写上提供了方便，但是仍然存在大量的网络请求，我们希望减少这些请求。

5.2 使用精灵图像优化

要通过vite-plugin-svg-icons 实现此解决方案，首先安装此插件

$ pnpm i vite-plugin-svg-icons -D 在vite.config.ts 中设置从\’vite-plugin-svg-icons\’ 导入{ createSvgIconsPlugin }。

//以下是具体配置信息

{

插件： [

//省略其他插件

创建SvgIconsPlugin({

iconDirs: [path.join(__dirname, \’src/assets/icons\’)]

})

]

}

在src/components目录下新建一个SvgIcon组件：//SvgIcon/index.tsx。

导出接口SvgIconProps {

名称？ 字符串；

前缀：字符串；

color: 字符串；

[key: 字符串]: 字符串；

}

导出默认函数SvgIcon({

姓名，

前缀=\’图标\’,

颜色=\’#333\’,

.道具

}: SvgIconProps) {

constsymbolId=`#${前缀}-${名称}`;

返回（

svg {.props} aria-hidden=\’true\’

使用href={symbolId} fill={color} /

/svg

）；

}

将SvgIconconst 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]=文件名.split(\’.\’);

返回svg 名称。

});

//渲染SVG组件

{iconUrls.map((项目)=(

SvgIcon name={item} key={item} width=\’50\’ height=\’50\’ /

))}

将代码行import \’virtual:svg-icons-register\’ 添加到src/main.tsx 文件中。当您返回浏览器时，请注意精灵图像包含所有图标的特定内容。对于页面上的每个特定图标，通过use属性引用它并使用精灵图像：的相应内容。通过这种方式，您可以将所有SVG 内容内联到HTML 中，并将许多网络请求保存到SVG。有关精灵示例，请参阅SVG 精灵文件。例如，icons.svgsvg xmlns=\’http://www.w3.org/2000/svg\’ style=\’display: none;\’

符号id=\’icon-home\’ viewBox=\’0 0 24 24\’

!– 主页图标内容–

路径d=\’M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\’/

/象征

符号id=\’图标搜索\’ viewBox=\’0 0 24 24\’

!– 搜索图标的内容–

道次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.57 升.27.28 v.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\’/

/象征

!– 更多图标.–

/svg

使用

可在HTML 或Vue 组件中使用的元素参考图标

引用SVG 精灵中特定图标的元素：

svg 类=\’图标\’

使用xlink:href=\’icons.svg#icon-home\’/use

/svg

svg 类=\’图标\’

使用xlink:href=\’icons.svg#icon-search\’/use

/svg

#以上生产环境部署Vite:静态资源相关内容来源网，仅供参考。相关信息请参见官方公告。