6 ms·

Dead code elimination (i.e. UglifyJS) should do away with most unused code from a library - so with a proper build system this shouldn't be a big concern...

madeofpalk 9y ago
I don't think you'll find UglifyJS's dead code elimination to do the type of tree shaking that'll remove jQuery's unused functions.
kitsunesoba 9y ago
What if one wants to keep things simple with a minimal/nonexistent build system? I haven’t done serious web work in ages but if I did I’m quite sure I’d find all of today’s “required” build tools quite frustrating.
- jonknee 9y ago
  And yet by "keeping it simple" you have to re-write and maintain a bunch of utility functions that are solved problems.
  - megous 9y ago
    If it's for some gain, then why not. It's a trade off decision.
  - rhizome 9y ago
    If they're solved problems, what difference does it make what form and package they arrive in?
  - Touche 9y ago
    You say that as those jQuery is the only place you can get a addClass function without writing it yourself. It isn't.
    - jonknee 9y ago
      Not at all, OP said "if one wants to keep things simple with a minimal/nonexistent build system" which would exclude the easiest ways to get one-off utility functions.
  - no_wizard 9y ago
    Wouldn’t this be an argument for adding those solved problems to JavaScript as like a standard library? I’m not a web developer by day so forgive me if I don’t know all the nuance of JS but I feel like what you would consider it’s “standard” functions is quite small.
    - city41 9y ago
      That is generally the long term solution, and the reason this website is saying jQuery is no longer needed (because modern browsers offer a much better and more consistent foundation). The problem is the short term. While waiting for browsers to catch up and add new things, we usually have to polyfill, hence this debate.
    - madeofpalk 9y ago
      For what it's worth, it already is. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... Builtin functions for adding, removing, toggling and querying classes on elements.
dmitriid 9y ago
It won't. UglifyJS's dead code elimination is snake oil and mirrors anywhere but in the most trivial of cases. See: - https://github.com/webpack/webpack/issues/2867 https://github.com/webpack/webpack/issues/2867 - https://github.com/webpack/webpack/issues/4784 https://github.com/webpack/webpack/issues/4784 (Note: webpack doesn't do any dead code elimination, it relies on UglifyJS to do so)
- aurbano 9y ago
  Those are good links to interesting discussions on the topic, I guess UglifyJS is better than nothing although you're right there. Are you aware of any alternative that can do tree shaking? Reading those issues' comments there is a link to babel-webpack-tree-shaking [1] which seems to do it? [1] https://github.com/Aladdin-ADD/babel-webpack-tree-shaking https://github.com/Aladdin-ADD/babel-webpack-tree-shaking
  - dmitriid 9y ago
    Rollup [1] seems to be pretty good at tree-shaking and apparently babel's babili minifier [2] is better than UglifyJS (but I guess it's too early to tell) But both come with their own tradeoffs: Rollup is ES6 only and doesn't support certain features from TC39's Stage 3. Babili is very very new :) [1] https://rollupjs.org https://rollupjs.org [2] https://github.com/babel/minify https://github.com/babel/minify

madeofpalk 9y ago

I don't think you'll find UglifyJS's dead code elimination to do the type of tree shaking that'll remove jQuery's unused functions.

kitsunesoba 9y ago

What if one wants to keep things simple with a minimal/nonexistent build system? I haven’t done serious web work in ages but if I did I’m quite sure I’d find all of today’s “required” build tools quite frustrating.

jonknee 9y ago
And yet by "keeping it simple" you have to re-write and maintain a bunch of utility functions that are solved problems.
- megous 9y ago
  If it's for some gain, then why not. It's a trade off decision.
- rhizome 9y ago
  If they're solved problems, what difference does it make what form and package they arrive in?
- Touche 9y ago
  You say that as those jQuery is the only place you can get a addClass function without writing it yourself. It isn't.
  - jonknee 9y ago
    Not at all, OP said "if one wants to keep things simple with a minimal/nonexistent build system" which would exclude the easiest ways to get one-off utility functions.
- no_wizard 9y ago
  Wouldn’t this be an argument for adding those solved problems to JavaScript as like a standard library? I’m not a web developer by day so forgive me if I don’t know all the nuance of JS but I feel like what you would consider it’s “standard” functions is quite small.
  - city41 9y ago
    That is generally the long term solution, and the reason this website is saying jQuery is no longer needed (because modern browsers offer a much better and more consistent foundation). The problem is the short term. While waiting for browsers to catch up and add new things, we usually have to polyfill, hence this debate.
  - madeofpalk 9y ago
    For what it's worth, it already is. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... Builtin functions for adding, removing, toggling and querying classes on elements.

dmitriid 9y ago

It won't. UglifyJS's dead code elimination is snake oil and mirrors anywhere but in the most trivial of cases. See: - https://github.com/webpack/webpack/issues/2867 https://github.com/webpack/webpack/issues/2867 - https://github.com/webpack/webpack/issues/4784 https://github.com/webpack/webpack/issues/4784 (Note: webpack doesn't do any dead code elimination, it relies on UglifyJS to do so)

aurbano 9y ago
Those are good links to interesting discussions on the topic, I guess UglifyJS is better than nothing although you're right there. Are you aware of any alternative that can do tree shaking? Reading those issues' comments there is a link to babel-webpack-tree-shaking [1] which seems to do it? [1] https://github.com/Aladdin-ADD/babel-webpack-tree-shaking https://github.com/Aladdin-ADD/babel-webpack-tree-shaking
- dmitriid 9y ago
  Rollup [1] seems to be pretty good at tree-shaking and apparently babel's babili minifier [2] is better than UglifyJS (but I guess it's too early to tell) But both come with their own tradeoffs: Rollup is ES6 only and doesn't support certain features from TC39's Stage 3. Babili is very very new :) [1] https://rollupjs.org https://rollupjs.org [2] https://github.com/babel/minify https://github.com/babel/minify