-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Upgrade bundling #2187
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
Upgrade bundling #2187
Conversation
Conflicts: package.json
tasks/util/constants.js
Outdated
}, | ||
|
||
bubleifyOptions: { | ||
target: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm. We have to target browsers waaaaaaaay older than that. Can bubleify guarantee to output code that IE11 understands?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@etpinard that is the best bubleify can do, it is targeted only for ES6 → ES5, not ES5 → ES3.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm. Well that won't work then. plotly.js needs to be pure ES5.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@etpinard that is pure ES5, same as what we have now. target
flag only indicates what new ES6 features are supported by target environment to avoid their handling, eg. some browsers have Object.assign
or arrow functions, but do not do power a ** b
etc, so since we indicate oldest target available in buble
, we make sure we get pure ES5.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we put these config options in the package.json instead, so that all consumers bundling with browserify or webpack+ify-loader get the same results as us in our dist/
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can the output bundle be minified by plain-old uglify-js? e.g. does
browserify -t bubleify src/plotly.js | uglify-js > bundle.js
work?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not a big fan of this target
option. I find it pretty confusing. Could we instead manually list all the transforms we want turned on?
@dfcreative can you run |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How serious is that? Should I try to squeeze that more?
I think so. That's an awful lot extra bytes. I see that minify-stream
is using uglify-es
. Is there a way to make it more agressively minify things? Or maybe we should just use plain-old uglify-js
Oh well, after thinking about this some more, transpiling our deps down to ES5 is inevitable if we want to stay up-to-date will latest development. So thanks for getting the ball rolling @dfcreative
tasks/util/constants.js
Outdated
}, | ||
|
||
bubleifyOptions: { | ||
target: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we put these config options in the package.json instead, so that all consumers bundling with browserify or webpack+ify-loader get the same results as us in our dist/
?
tasks/util/constants.js
Outdated
}, | ||
|
||
bubleifyOptions: { | ||
target: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can the output bundle be minified by plain-old uglify-js? e.g. does
browserify -t bubleify src/plotly.js | uglify-js > bundle.js
work?
tasks/util/constants.js
Outdated
}, | ||
|
||
bubleifyOptions: { | ||
target: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not a big fan of this target
option. I find it pretty confusing. Could we instead manually list all the transforms we want turned on?
* | ||
*/ | ||
module.exports = function patchMinified(minifiedCode) { | ||
return minifiedCode.replace(PATTERN, NEW_SUBSTR); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One of the hackiest thing in plotly.js at the moment. Good riddance 🎉
@@ -1,6 +1,6 @@ | |||
var path = require('path'); | |||
var fs = require('fs'); | |||
var spawn = require('child_process').spawn; | |||
var spawn = require('cross-spawn'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ha nice catch. That's for that spawn('npm', ['ls', '--json', '--only', 'prod']);
statement below - which will be obsolete when we switch to npm@5
as the new package-lock.json
file will do that same as the current dist/npm-ls.json
.
Ha. I see. Yeah we have a bunch of new things in master that didn't get released yet. 👌 |
Great PR. Thanks for doing this @dfcreative Getting rid of Merge away 💃 |
My Webpack code splitted asset increased by approximately 200 kilobytes after updating to 1.32.0. |
That's because we added a lot of features (sorry 😉 ). But still 200 kB seems larger than the worse case increase (see bundle size changes from |
Got it. Would still be nice to be more selective about the features. It would be cool to have the possibility to omit special features like chart zooming, saving as picture or maybe animations to get a smaller package.
Unfortunately, my asset has a lot of Vue.js related stuff in it. It would take weeks to sort it out ;) It's not exactly 200 kilobytes, though. |
Yep, we know. That'll have to wait for v2 though. |
minify-stream
instead ofuglifyjs2
- less errors, better optionspatch_minified
(seems thatuglify-es
fixes that since tests pass)bubleify
to handle ES6 dependencies