Analyse and reduce the bundle size

[santhoshtr]

Currently the https://wikimedia.github.io/wikipedia-preview/demo/script/wikipedia-preview.production.js is about 142KB. Out of 142KB, about 136KB is dompurify library.

I see that DOMPurify is used for sanitizing the content from wikipedia. May be we need to check the trust model for the content too. If we can avoid bundling dompurify, then wikipedia-preview is just 5.4KB uncompressed.

[hueitan]

This is how it looks like npm run wba,
and we can also lower the bundle size if we take care of the i18n files in this task

[santhoshtr]

To clarify, I was talking about https://wikimedia.github.io/wikipedia-preview/demo/script/wikipedia-preview.production.js file. Its big share is dompurify. For example in the web page, https://diff.wikimedia.org/2021/07/29/new-wikipedia-preview-feature-provides-context-from-wikipedia-across-the-web/ this is one of the biggest javascript assets.

[stephanebisson]

@santhoshtr I'm curious about how you got those numbers (136k / 124k) from that production file. The only way I know how to measure those things is with Webpack bundle analyzer (see Huei's screenshot).

That said, I would also like to remove DOMPurify.

[akudiaku]

https://github.com/wikimedia/wikipedia-preview/actions/runs/10883706041/job/30197431268#step:5:1

[hueitan]

This is the new bundle size visualization after this #177, we have plan to remove the purify.js and have the i18n as the separate #222