Skip to content

Reduce browser bundle size to be comparable with alternative formatters #12144

@TimvdLippe

Description

@TimvdLippe

Environments:

  • Prettier Version: 2.5.1
  • Running Prettier via: Browser API
  • Runtime: Chrome 99
  • Operating System: n/a
  • Prettier plugins (if any): parser-babel

Steps to reproduce:

I would like to include Prettier as part of a browser web page. In this case, I am looking at integrating Prettier into Chrome DevTools, which has a feature to automatically format web content in our sources panel. This feature is currently implemented using custom-written formatters (example).

The current formatters rely on the CodeMirror 5 tokenizers, which I am working on removing: https://bugs.chromium.org/p/chromium/issues/detail?id=1287519 As part of that work, I am analyzing the state of affairs of formatters used on the web and which ones we could potentially use. Since Prettier is an active and popular project, it is one of the first I am looking at.

I have a basic version of Prettier integration working, but I quickly discovered a blocker for us: the bundle size of Prettier greatly exceeds the size budget I have available. At Chromium, we have strict size restrictions for our projects, as users install Chrome on low-space devices. If I include only the standalone bundle + babel parser (required for JS), it clocks in at ~900Kb. I am working with a budget of around 100Kb, as we have both our CodeMirror 5 tokenizers as well as custom implementation of formatting.

At the same time, I looked at alternatives such as js-beautify, which is 40Kb in total (25Kb main bundle, 15Kb for css + html), which is well within our budget. However, js-beautify is less active than Prettier, which is why I initially would prefer to adopt Prettier.

FWIW this problem was previously mentioned at #10157 (comment) and I am not sure how much the ES Modules situation would help reducing the bundle size. Looking at the Skypack size, it shows 185Kb network size (https://cdn.skypack.dev/-/prettier@v2.5.1-2KrfQhZNe1CJFznlAR6m/dist=es2019,mode=imports/unoptimized/esm/standalone.mjs), but that is compressed with brotli. If I download the file and obtain the filesize, it is 720Kb. Since Chromium bundles files and then serves it with brotli, our network size would be more manageable, but unfortunately the disk space limitation is calculated on the original uncompressed size. Hence we are looking at the 720Kb file size rather than the 185Kb network size.

Would it be possible to reduce the bundle size of Prettier to be comparable to alternative formatters and make it feasible for Chrome DevTools to adopt Prettier?

Expected behavior:

The Prettier bundle size is manageable, ideally below 100Kb, similar to js-beautify and alternatives.

Actual behavior:

Using only the standalone bundle + babel parser (e.g. not including CSS or HTML, which we also would need) clocks in at ~900Kb.

Metadata

Metadata

Assignees

No one assigned

    Labels

    status:needs investigationIssues that need additional investigation, e.g. to understand whether the reported behavior is a bugtype:metaIssues about the status of Prettier, or anything else about Prettier itself

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions