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 into
developfrom
feature/webpack-babel-optimizations
Open

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

Conversation

@backflip

@backflip backflip commented Oct 25, 2017

Copy link
Copy Markdown
Collaborator
  • 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

orioltf commented Oct 30, 2017

Copy link
Copy Markdown
Member

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

@orioltf

orioltf commented Oct 30, 2017

Copy link
Copy Markdown
Member

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

backflip commented Oct 30, 2017

Copy link
Copy Markdown
Collaborator Author

@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

orioltf commented Oct 31, 2017 via email

Copy link
Copy Markdown
Member

@orioltf

orioltf commented Nov 2, 2017

Copy link
Copy Markdown
Member

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

Comment thread gulp/js/default.js
presets: [
['env', {
debug: util.env.dev,
useBuiltIns: 'entry',

@backflip backflip Nov 6, 2017

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

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

@orioltf Tests are fixed in #89

@backflip

Copy link
Copy Markdown
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