Skip to content

Use woff2 and vite to reduce bundle size #350

@SimonShiki

Description

@SimonShiki

Now the size of scratch-render-fonts is ~1 MB, and it relies on external Webpack configurations to function properly. I believe the package size can be optimized by implementing the following measures:

  1. Use the woff2 format instead of ttf/otf. The woff22 format is now widely supported across major browsers and offers significantly better compression rates compared to current two formats. For example, NotoSans-Medium.ttf shrinks from 453 KB to 169 KB after compression. After implementing this optimization, the bundle size can be reduced to approximately 700 KB. This change works without requiring any modifications to external code.
  2. Use Vite instead of Webpack. Webpack adds some boilerplate code to ensure compatibility, but in most cases, this results in an increase in bundle size. Since this package is simple enough, switching to Vite is simple and can further reduce the bundle size to under 500 KB. This change requires modifying some external dependencies.
  3. Avoid inlining fonts. See Consider loading fonts as static files instead of embedding #18

The first two points have been tested on the Scratch mod I maintain and work well (See https://github.com/Clipteam/clipcc-render-fonts); if you’re interested, I’d be happy to contribute these changes to the upstream repository

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions