静态资源

本文介绍各种在 WinJS 项目中使用静态资源的方式。

WinJS 支持在代码中引用图片、字体、音频、视频等类型的静态资源。

什么是静态资源

静态资源是指 Web 应用中不会发生变化的文件。常见的静态资源包括图片、字体、视频、样式表和 JavaScript 文件。这些资源通常存储在服务器或 CDN 上，当用户访问 Web 应用时会被传送到用户的浏览器。由于它们不会发生变化，静态资源可以被浏览器缓存，从而提高 Web 应用的性能。

WinJS 使用两个目录来处理样式表、字体或图片等资源。

使用图片资源

在实际的开发中我们经常会用到一些静态文件，尤其是图片和一些图标。我们推荐大部分图片使用 cdn，但是有些时候为了加载速度可能也需要直接打包在 js 中。

我们可以直接在 ts 或者 js 中直接引用资源文件，大部分的资源文件引入之后都会转化为一个路径。我们可以将其设置为了图片的 src，或者是 window.open 的地址。

WinJs 也支持直接导入获取资源路径。

tsx

import logo from '@/assets/img/logo.png';

console.log(logo); //logo.84287d09.png

return <image src={logo} />;

为了加快加载速度，并且减少网络请求，我们会把小于 1000k 的转化为 base64，否则会被构建为独立的图片文件输出到构建目录的 static 目录中。

你可能注意到最后生成的 logo.png 会变成 logo.84287d09.png ，这个是为了保证每次发布版本都会更新图片，如果不改名字的话，会命中 logo.png 的缓存，你可以放心的使用 import 而不用担心缓存。

WinJS 默认将 @ 映射到项目的 src 目录中，所以你可以在项目的任意位置使用 @/assets/ 或 @/components 之类的路径来引入静态资源和组件等。你将不再需要使用如 ../../components 之类的相对路径了。

在 CSS 中同样支持别名，只是别忘了在 CSS 中使用别名需要增加 ~ 前缀。

css

.logo {
  background: url(~@/assets/img/logo.png);
}

如果想要使用缓存，可以把文件放到 public/logo.png，然后再代码中这样使用。

tsx

return <image src="/logo.png" />;

在编译的时候，public 会全部移动到 dist 中，不会进行任何处理。使用时一定要使用绝对路径。通常我们建议从 JavaScript 导入 stylesheets，图片和字体。 public 文件夹可用作许多不常见情况的变通方法.

WinJS 对于 svg 资源，支持 icons ，可以直接导入作为组件使用：

vue

<template>
  <div>
    <win-icon name="dog" class="icons"/>
  </div>
</template>

项目根目录下的 public 目录可以用于存放在应用程序的指定URL下公开访问的静态资源，你可以通过应用程序的代码或浏览器的根URL / 获取 public/ 目录中的文件。

比如，你可以在 public 目录下放置 robots.txt、manifest.json 或 favicon.ico 等文件。

按照约定，WinJS 使用 src/assets/ 目录来存储这些资源，如样式表、图片、字体或SVG等。

在应用程序的代码中，你可以通过使用 ~/assets/ 路径来引用位于 src/assets/ 目录中的文件。

在使用图片资源时，你可以根据下方表格中图片的优缺点以及适用场景，来选择合适的图片格式。

格式	优点	缺点	适用场景
PNG	无损压缩，不会丢失图片细节，不失真，支持半透明	不适合色表复杂的图片	适合颜色数量少，边界层次分明的图片，适合用在 logo、icon、透明图等场景
JPG	颜色丰富	有损压缩，会导致图片失真，不支持透明度	适合颜色数量多，颜色带有渐变、过度复杂的图片，适合用在人像照片、风景图等场景
WebP	同时支持有损压缩与无损压缩，支持透明度，体积比 PNG 和 JPG 小很多	iOS 兼容性不好	几乎任何场景的像素图片，支持 WebP 的宿主环境，都应该首选 WebP 图片格式
SVG	无损格式，不失真,支持透明度	不适合复杂图形	适合矢量图,适合用于 icon