GithubHelp home page GithubHelp logo

Comments (3)

richex-cn avatar richex-cn commented on May 19, 2024 1

现在这样改动可以自行配置挺好的,可以向下兼容。

提了个 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.

KonghaYao avatar KonghaYao commented on May 19, 2024

我新建了一个分支实现了这个 feature,你可以通过配置 config 中的这个函数自定义字体的名称。这个feature的实现方式还可以修改,如果你有更好的实现方式的话,欢迎 PR。我们将会在您确认后发布到 beta 版本。

renameOutputFont(hash, ext, index) {
// return index.toString() + ext // index 命名
return hash.slice(0, 6) + ext // 短 hash 命名
}

这样子实现是因为 hash 在多个平台适配上经过了特殊处理。如果需要自定义,向外暴露修改操作比较好。

关于文件命名的话,涉及到了 CDN 的缓存,中文网字计划有一个庞大的 CDN, 用于页面静态文件缓存。

我们经常使用它来作为 cn-font-split 实现效果的检测,这样就会有很多新旧版本的文件冲突问题。

一般我们不会使用自增的文件名称,因为那样需要更新的文件太多了,服务器需要 purge 很长时间。利用 hash 不冲突的特性可以实现只更新索引文件(result.css),然后浏览器自动下载新的分片。

diff 地址:
ts...feature/renameOutputFile

from cn-font-split.

KonghaYao avatar KonghaYao commented on May 19, 2024

4.9.0-beta.2 本周版本 beta 2 发布,已经将您的 feature 加入,如有想要的功能,欢迎 PR 或 Issues!😊

from cn-font-split.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.