Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce JS bundle size and add webpack bundle analyzer #86

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from

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 join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants