babili #898
babili #898
Conversation
|
|
||
| Tools such as [uglify](https://github.com/mishoo/UglifyJS2) don't currently support targeting the latest version of Javascript ([yet](https://github.com/mishoo/UglifyJS2/issues/448)). | ||
|
|
||
| We currently to use tools like Babel to compile ES6 code down to ES5 code to support older browsers. Then we use something like uglify to minify our code to cut down on the bundle size. |
|
|
||
| ## Why minify? | ||
|
|
||
| [Minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unncessary characeters without changing it's functionality. The basics of minification remove things like comments, whitespace, newlines, and extra parentheses. You can also simplify code, transform code to smaller equivalents, remove unused code, etc. |
|
Probably needs some more pictures, maybe a minified ascii guy fieri cc @mathiasbynens, @jdalton, @addyosmani if any of you want to review/add something. |
|
|
||
| ### Webpack | ||
|
|
||
| You can either just use the preset option above with `babel-loader`, or use it seperately with the [babili-webpack-plugin](https://github.com/boopathi/babili-webpack-plugin) (made by [@boopathi](https://github.com/boopathi/), who also works on babili). |
There was a problem hiding this comment.
Using it with babel-loader will only minify the body of the modules loaded with babel-loader, but not any of the files loaded or generated by webpack, e.g. the bootstrap, the module wrapping function, or css modules exports.
There was a problem hiding this comment.
A more reasonable approach, IIUC, would be to transpile down to es2015 with babel-loader, let webpack bundle es2015, as acorn understands it, and then use (a modified version of?) babili-webpack-plugin to minify the entire bundle at the once (and transpile down to es5 in the same step should you need to).
There was a problem hiding this comment.
Will the babili-webpack-plugin be moved into core? Like the babel-loader?
There was a problem hiding this comment.
The current build sequence is transpile -> bundle -> minify ... As we don't traverse through Objects and its properties, I think there will not be much optimizations on the bundler generated code (modules[moduleId].call()) other than mangling and whitespace/comments removal. It can be made (transpile + minify) -> bundle if the bundler already produces mangled and has an option to output minified (just the syntax and comments) code. So I was thinking in terms of,
- transpile + minify (mangle=false)
- bundle - remove dead code inter module level (tree-shaking?)
transform(bundledcode, {minified: true, compact: true, comments: false, plugins: ["mangle"]})as the last step after bundling.
So, I'm not sure if such a webpack plugin should be the optimal way to use babili. I used it for testing and just polished and published so others can try babili in the current toolchain quick. If this turns out to be a good way to use babili, we can move it to babel org, maybe?
There was a problem hiding this comment.
Because of the way webpack does tree-shaking (by just removing the exporting, but leaving the declaration there), the tree-shaking step has to run before minify, or at least before DCE.
I wonder how "complete" the support it; e.g. would it know enough to mark exp from 'module' in import { exp } from 'module'; if (false) { exp(); } as unused? This might require DCE both before and after tree-shaking.
There was a problem hiding this comment.
Probably will be moved to webpack.optimize. webpack-contrib/babel-minify-webpack-plugin#1 - we can discuss in that repo instead.
|
I suggest being consistent with usage of the term "ES2015" instead of "ES6" |
| - ES6+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update. | ||
| - Uses the existing babel toolchain, can consume as a babel preset or standalone. | ||
| - Potential for custom smart transforms for React/Flow, etc. | ||
| - Could use flow/typescript annotations to help with minification. |
There was a problem hiding this comment.
Does Babel now support TypeScript annotation parsing like it does Flow or is this referring to something else?
There was a problem hiding this comment.
It doesn't, yeah I guess it should just say flow or just "type annotations"
|
This is excellent. No other comments besides the grammar nitpicks. 👍 |
|
Thanks for the review! Also github should add a feature that turns a |
|
Fixed capitalization of Babel/Uglify, ran spellcheck |
|
|
||
| At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification may transform programs into smaller equivalents and remove redundant/unreachable code. | ||
|
|
||
| Minification is primarily useful for decreasing the size of the Javascript payload sent from the server to the client: users will download less code to use your website. Advanced minification can also result in shorter parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining). |
|
Width on the blog posts seems small for a desktop screen
I think it's mostly good now? |
|
|
||
| There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that. | ||
|
|
||
| TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unwanted as people begin to ship ES6 to clients. Babili is also modular/flexible (it is a [Babel preset](http://babeljs.io/docs/plugins/#presets) and thus supports user plugins) and can be used as a preset or cli tool. Babili should also be able to do ES2015+ specific optimizations. |
|
Yay 100 comments!! |
Definitely not done but want feedback
@jayphelps @amasad @kangax, feel free to edit