Decrease prototype bundle size

usebedrock / bedrock

Bedrock is a static site generator to create large-scale HTML prototypes and document design systems

https://bedrockapp.org

Other

206 stars 28 forks source link

Decrease prototype bundle size #367

Open Wolfr opened 3 years ago

Wolfr commented 3 years ago

The prototype JS bundle size of Bedrock is 842kb.

How can we minimize the size?

Ideas

Switch from codemirror to prism
Remove jQuery
...? Suggestions welcome!

Wolfr commented 3 years ago

New suggestion: minify the bundle.

This could also be tied to a setting: production or development build.

I discovered CodeMirror is by far the biggest dependency, it weights 400-500kb if I recall correctly.

Wolfr commented 3 years ago

New suggestion: minify the CSS bundle as well.

Wolfr commented 3 years ago

Minification was implemented, Prism code blocks are in progress, the removing jQuery part is partially handled but needs more work.

Wolfr commented 3 years ago

core-prototype-nav.js: 95kb minified
core-style-guide.js: 126kb minified

It can be better but it's more reasonable. One problem, because of the splitting of prototype nav and core styleguide, jQuery is included twice.

If we would rewrite styleguide-search (27 LOC) to use vanilla JS, we would be able to throw jQuery out of core-style-guide.js and save those bytes.

Another option would be to include jQuery before everything.

Wolfr commented 3 years ago

rememberScroll also uses jQuery. In 7cf5e4715a2023b5b2fcb7ae2d9782dfe0c46d00 I tried to remove it, seems to work.