ionic-team / ionic-team/ionicons

Icon deployment in production apps

未关闭
#536 3 条评论 12 个 reaction 已指派 0 人 在 GitHub 查看
help wanted type: feature request
主要语言
TypeScript
星标
18.2k
派生
2.1k
PR 合并指标
30 天内没有已合并 PR

描述

There are a couple of issues with the current icon approach used by Ionic when used in a production application.

## Performance

Icons are "all or nothing" in the application. A typical app might use 5-20 icons but the build process results in 700 icons with a total size of almost 3mb in the svg folder in the build output.

The service worker pre-cache manifest includes all of these icons (2800 lines of code) even if you only use a single icon. The service worker also loads all of these icons into the cache (3mb) This uses network traffic, blocks other loading, and uses limited available local storage space.

## Lazy loading

Icons are lazy loaded as individual files when it would sometimes be faster to inline them into component files. I have noticed that the stencil site project uses inline svg to help with this. If an icon is only used by a single component then it results in an extra round trip to the server.

## Cache headers

Cache headers are difficult to specify for icon content. Javascript and css uses hash versions in the file names so that it possible to use "cache forever" headers on the content and know that old versions will be replaced. This does not work with icons. If "cache forever" is used then the icons can never be updated. If "cache for x days" is used then there will be lots of round trips to check for new versions even though the icons are very unlikely to change.

## Alternate approach

A potential alternate approach would be to use standard js imports for the content.

For example:

```tsx
// ionic/icons
export const svgAirplane = '

贡献指南

打开贡献指南

调研方向

首先追踪当前的图标文件、service-worker precache manifest 和 lazy-loading 路径是如何为生产应用生成的。评估提议的标准 JavaScript imports 是否适用于特定模式的图标以及自定义 SVG 支持。完成条件是确定一种一致认可的方法,并完成一种能够减少未使用图标输出、同时保留所述图标行为的实现。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
build-system, frontend, performance
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
28/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。