Reduce JS bundle size and add webpack bundle analyzer

backflip commented 6 years ago

Adding babel-preset-env removes the need for manual import of polyfills and will pick the necessary things out of babel-polyfill.
Adding webpack-bundle-analyzer generates a build/assets/js/webpack-report.html showing an overview of every bundle. This is tremendously helpful when analyzing bundle size.
Importing handlebars.runtime instead of handlebars reduces the main bundle size by about a trillion KB
Removing element-dataset does not do a lot with regards to bundle size, but I never understood what it was for and it doesn't seem to be missing when removed. :)

Tested in IE >= 9 and Chrome

TODO:

Check whether this includes the necessary polyfills only, we might have to play around with the useBuiltIns option some more

orioltf commented 6 years ago

It seems QUnit tests are failing all around… not only in this PR

orioltf commented 6 years ago

I implemented this branch in current project without issues so far. By the way: very handy (and scary up to a certain point) the stats view

backflip commented 6 years ago

@orioltf, re QUnit: Netlify seems to be fine, is it possible that the tests run through in PhantomJS (during the build) and we're just screwing up the paths for the browser?

orioltf commented 6 years ago

I would say so. It seems test.js gets a 404 when loading slideshow module page.

orioltf commented 6 years ago

@backflip How would you see using package.json to define the browserslist? https://github.com/ai/browserslist#environments I think it would be more transparent to everyone, specially in maintenance phases.

backflip commented 6 years ago

@orioltf Tests are fixed in https://github.com/unic/estatico/pull/89

backflip commented 6 years ago

Added to new implementation

unic / estatico

Reduce JS bundle size and add webpack bundle analyzer #86