https://github.com/mefechoel/minimal-bundle
An example app with a webpack config for a minimal bundle size.
https://github.com/mefechoel/minimal-bundle
Last synced: 9 months ago
JSON representation
An example app with a webpack config for a minimal bundle size.
- Host: GitHub
- URL: https://github.com/mefechoel/minimal-bundle
- Owner: mefechoel
- Created: 2019-01-12T12:10:39.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T04:16:08.000Z (about 3 years ago)
- Last Synced: 2023-03-06T22:44:39.355Z (almost 3 years ago)
- Language: JavaScript
- Size: 663 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Minimal Bundle
This is an example webpack config for a minimal bundle size.
It takes advantage of **es modules** with the `type="module"`
and `nomodule` attributes in script tags.
It showcases two strategies:
- A simple single build with split bundles
- A more advanced dual build with es5 bundles for legacy browsers and es6 bundles for modern browsers
## Polyfills
Polyfills are pieces of code that implement modern js
features that are not implemented in all browsers,
such as `Promise`, `fetch`, `Symbol`, etc.
The challange is to provide these polyfills only for
browsers, that do not support these features.
Modern browsers, that do implement all of those features,
should not need to download the code.
Usually polyfill scripts will only provide the alternative
implementation if the feature is not supported natively.
So modern browsers will download and parse big bundles of
polyfill scripts, but never use any of the code.
A popular way of including polyfills in js bundles is to use
`@babel/polyfill`.
It is a big script that needs to be downloaded and parsed.
Most of it will never be used, though.
Its minified size is **86.6kB**, which takes around
**4.1sec** on a simulated slow 3G connection.
This can be improved by bundling a custom polyfill script,
which only includes features used in the project.
That is a certain overhead, but it can decrease the filesize
quite significantly.
For the sample app a set of commonly used polyfills is
included.
This custom bundle is **47.1kB** big and takes around
**3.4sec** on the same connection.
This technique improves loadtimes, but it adds the cost
of dealing with polyfills yourself and modern devices
still download an unneccessarily big bundle.