Comments (3)
现在这样改动可以自行配置挺好的,可以向下兼容。
提了个 PR #17 ,参考 Webpack 支持了字符串模板,例如自增文件名只需要 renameOutputFont: '[index][ext]'
就行了。
另外对于使用自增文件名的缓存更新问题,通常生产环境中极少会更新已经完成分包的静态文件,如果确实需要更新并且使用了自增文件名,也可以通过新增的 renameOutputFont
配置项解决,按照字符串模板的方式可以手动在第二次分包时使用 renameOutputFont: 'A[index][ext]'
,第三次 'B[index][ext]'
,或者像这样自动的生成一个基于日期并且尽可能短的文件名:
...
renameOutputFont: ({ transferred, ext, index }) => {
const pad2 = num => num.toString().padStart(2, '0')
const now = new Date()
const date = [
now.getFullYear() % 2000,
pad2(now.getMonth() + 1),
pad2(now.getDate())
].join('')
return Number(date).toString(36) + index.toString(36) + ext
}
...
会得像这样的结果:
4y9a0.woff2
4y9a1.woff2
...
4y9az.woff2
...
当然这只是一个例子,还有很多方法,根据实际情况自由发挥。
from cn-font-split.
我新建了一个分支实现了这个 feature,你可以通过配置 config 中的这个函数自定义字体的名称。这个feature的实现方式还可以修改,如果你有更好的实现方式的话,欢迎 PR。我们将会在您确认后发布到 beta 版本。
cn-font-split/packages/subsets/test/node.test.mjs
Lines 23 to 26 in 5906206
这样子实现是因为 hash 在多个平台适配上经过了特殊处理。如果需要自定义,向外暴露修改操作比较好。
关于文件命名的话,涉及到了 CDN 的缓存,中文网字计划有一个庞大的 CDN, 用于页面静态文件缓存。
我们经常使用它来作为 cn-font-split 实现效果的检测,这样就会有很多新旧版本的文件冲突问题。
一般我们不会使用自增的文件名称,因为那样需要更新的文件太多了,服务器需要 purge 很长时间。利用 hash 不冲突的特性可以实现只更新索引文件(result.css),然后浏览器自动下载新的分片。
diff 地址:
ts...feature/renameOutputFile
from cn-font-split.
4.9.0-beta.2 本周版本 beta 2 发布,已经将您的 feature 加入,如有想要的功能,欢迎 PR 或 Issues!😊
from cn-font-split.
Related Issues (20)
- [log] 清理打包日志中的无效信息
- 【harfbuzz替换】完全使用 harfbuzz 作为核心 HOT 1
- 【test】增加基本的浏览器字体显示测试 HOT 1
- 【test】Feature 检测
- CLI 支持 HOT 1
- 4.9.0 在 Node 中无法使用 HOT 3
- 【bug】开发者使用非 pnpm 会有问题
- [feature subset] 分包unicode重复,导致 feature 失效 HOT 1
- [feature subset] 缺失 GPOS 表的解析,导致部分 feature 的 kern 消失
- [feature request] 希望可以通过配置以显式移除生成 css 中的 font-weight 字段 HOT 4
- [bug] unicode-range 选项干扰浏览器的渲染 HOT 8
- 在线分包出现以下报错 HOT 5
- [feature request] 支持 VariableFont HOT 8
- [bug] 相同字体文件执行2次切割产物分片不同 HOT 3
- 大佬 可以支持取字集的功能吗 HOT 2
- Emoji字体分包 HOT 22
- [分包算法]:单包 feature 巨量问题 HOT 1
- 【图片生成】部分字体的生成有问题 HOT 3
- 【字体分析】: 与 CJKTables 统一数据源
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cn-font-split.