Skip to content
This repository was archived by the owner on May 23, 2025. It is now read-only.

Reduce JS bundle size and add webpack bundle analyzer#86

Open
backflip wants to merge 7 commits intodevelopfrom
feature/webpack-babel-optimizations
Open

Reduce JS bundle size and add webpack bundle analyzer#86
backflip wants to merge 7 commits intodevelopfrom
feature/webpack-babel-optimizations

Conversation

@backflip
Copy link
Collaborator

@backflip backflip commented Oct 25, 2017

  • 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

@backflip backflip changed the title [WIP] Update to webpack 3, add babel-preset-env, add bundle analyzer [WIP] Reduce JS bundle size and add bundle analyzer Oct 25, 2017
@backflip backflip changed the title [WIP] Reduce JS bundle size and add bundle analyzer Reduce JS bundle size and add webpack bundle analyzer Oct 25, 2017
@orioltf
Copy link
Member

orioltf commented Oct 30, 2017

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

@orioltf
Copy link
Member

orioltf commented Oct 30, 2017

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
Copy link
Collaborator Author

backflip commented Oct 30, 2017

@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
Copy link
Member

orioltf commented Oct 31, 2017 via email

@orioltf
Copy link
Member

orioltf commented Nov 2, 2017

@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.

presets: [
['env', {
debug: util.env.dev,
useBuiltIns: 'entry',
Copy link
Collaborator Author

@backflip backflip Nov 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: Dependencies need to be updated accordingly:

    "@babel/core": "^7.0.0-beta.34",
    "@babel/polyfill": "^7.0.0-beta.34",
    "@babel/preset-env": "^7.0.0-beta.34",
    "babel-loader": "^8.0.0-beta.0",

@backflip
Copy link
Collaborator Author

@orioltf Tests are fixed in #89

@backflip
Copy link
Collaborator Author

Added to new implementation

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants