Does not work at all

[Kasheftin]

Excuse me, I'm totally stuck.

That's my main.jsx, it has to be converted to main.min.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>lala</div>,document.getElementById("root"));

That's my build.js script:

var fs = require("fs");
var browserify = require("browserify");
browserify("./main.jsx")
  .transform("babelify",{
    presets: ["react","es2015","babili"]
  })
  .bundle()
  .pipe(fs.createWriteStream("./main.min.js"));

These are my package.json dependencies:

"babel-minify": "^0.1.12",
"babel-plugin-uglify": "^1.0.2",
"babel-preset-babili": "0.0.4",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"bootstrap-sass": "^3.3.7",
"browserify": "^13.1.0",
"classnames": "^2.2.5",
"extend": "^3.0.0",
"mobx": "^2.5.2",
"mobx-react": "^3.5.7",
"mobx-react-devtools": "^4.2.6",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"uglify": "^0.1.5"

The result is main.min.jsx with filesize ~ 730KB. If I cut off babili from presets, the result is the same.

What do I do wrong?

[dcamilleri]

Hi @Kasheftin, have you added babili to your presets in .babelrc file ?

Example from the docs

{
  "presets": ["es2015"],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  }
}

[rxgx]

I'm getting the same result with the following .babelrc file and either BABEL_ENV or NODE_ENV of "production" :

{
  "presets": [
    "modern-browsers/webpack2",
    "react"
  ],
  "env": {
    "production": {
      "presets": [
        "modern-browsers/webpack2",
        "babili",
        "react"
      ]
    },
    "test": {
      "presets": [
        "es2015"
      ]
    }
  }
}

Does the order of the presets list matter to Webpack or Babel?

[Kasheftin]

I don't have neither .babelrc nor package.json config for babili. I suppose that's just different ways to specify configuration. I have this configuration included in my node script.

I've just added both .babelrc and package.json section (without env, just presets:["react","es2015","babili"]) but still can't see any difference.

[lmj0011]

@Kasheftin I have a setup similar to yours and I'm getting this error
Error: Couldn't find preset "minify" relative to directory

[boopathi]

@lmj0011 Looks like you have the wrong preset name. The preset name is "babili" and not "minify".

[dlong500]

I also can't get babili to work (either using the babel preset or the webpack plugin). The babel preset doesn't seem to have any affect at all. The webpack plugin does reduce the size of the bundles, but then I get a bunch of TypeErrors in the browser.

Hopefully it's just bugs that will get worked out, but I don't know what is going on. I'm willing to try any suggestions.

[dmackerman]

Not sure why you guys are having issues. I'm using Webpack 2, but this has been working for us.

      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'babili'],
        },
      },

Not even sure if we need the es2015 preset there.

[rxgx]

@dmackerman what's the difference in your file sizes, with and without babili?

[dmackerman]

@rxgx our bundle in development mode is around 6.5MB. After babili it comes down to around 2? Then after gzipping everything gets down to around 500k

(We need to do further optimizations) 😄

[dlong500]

I've tried all manner of adding, removing, and re-ordering presets and plugins and can't get babili to change the size of the bundle by more than a tiny bit.

When not using babili at all, I get:

Version: webpack 2.1.0-beta.25
Time: 11205ms
         Asset     Size  Chunks             Chunk Names
   main.min.js  3.57 MB       0  [emitted]  main
vendors.min.js   346 kB       1  [emitted]  vendors

If I use:

      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          babelrc: false,
          "presets": [
            "babili",
            "react",
            "es2015",
            "stage-0",
          ],
        }
      }

Then I get:

Version: webpack 2.1.0-beta.25
Time: 22861ms
         Asset    Size  Chunks             Chunk Names
   main.min.js  3.4 MB       0  [emitted]  main
vendors.min.js  346 kB       1  [emitted]  vendors

If I remove the include/exclude statements (don't we want babili to process node_modules?), I get even slightly larger files (though it may be affected by running the other presets on node_modules as well):

Version: webpack 2.1.0-beta.25
Time: 49536ms
         Asset     Size  Chunks             Chunk Names
   main.min.js  3.41 MB       0  [emitted]  main
vendors.min.js   353 kB       1  [emitted]  vendors

I'm just at a loss on how to proceed. By the way, UglifyJS can get my main.min.js file down to 1.26 MB.

In regards to node_modules, wouldn't we want a minifier to process all code (including third party modules)? In this respect I think babili is different than typical babel presets and plugins. It would seem there needs to be a way to apply only the babili preset to all files while still excluding node_modules for the other presets.

[rxgx]

I re-read the documentation I think the issue is that Babili isn't operating the same way as UglifyJS or Closure Compiler. There's only a small amount of minification due to Babili running per file rather than per bundle.

One issue with using Babili as a preset is that then Babili would only run per-file rather than on the whole bundle. Minification usually happens after bundling as with the “UglifyJsPlugin” in webpack. However, running it after bundling would lose the speed benefits (needs to be measured) of doing the transpiling/minification in the same step. Again, this is something we need to think about: how to intergrate or pass more information to the bundler.

[dlong500]

I haven't tried it since my last post so I don't know if any changes might have improved things for me (read: make it work at all), but I don't get the argument about speed benefits if it destroys a large part of the actual minification benefits. This isn't a tool that's going to be run much in development. For production deployment it doesn't really matter if it takes a minute longer to minify a bundle.

Don't get me wrong. I know this is a beta (alpha?) project and I appreciate the work towards a new way of doing minification. I'm just offering feedback that it hasn't been working for me yet.

[boopathi]

For those who are using babili with webpack, you can try babili-webpack-plugin.

• A webpack loader operates on single files and babili preset as a webpack loader is going to consider each file to be executed directly in the browser global scope (by default) and will not optimize some things in the toplevel scope. This is going to change and you can opt-in to optimize toplevel scope - Add option: topLevel to Mangler #210, Dead code analysis treats all top level vars as const and not global scope varibales that are subject to change #203, ...
• When you exclude node_modules from being run through the babel-loader, babili optimizations are not applied to the excluded files as it doesn't pass through the minifier.
• When you use the babel-loader with webpack, the code generated by webpack for the module system doesn't go through the loader and is not optimized by babili.
• A webpack plugin can operate on the entire chunk/bundle output and can optimize the whole bundle and you can see some differences in minified output. But this will be a lot slower as the file size is usually really huge. So there is another idea where we can apply some optimizations as a part of the loader and some optimizations in a plugin (for webpack). For that, there is some more work that is done on babili's side (Minify Options #162).

Comments

Also, one more thing to note is that by default the preset doesn't remove comments. So in your babelrc or babel config that you use for babili, you can set comments to false.

{
  presets: ["babili"],
  comments: false
}

I've not tried babili with browserify yet, so I can't comment much there.

[maletor]

I have fallen down the same path. This does work for me, though: https://github.com/boopathi/babili-webpack-plugin.

[kangax]

Is this still an issue for some folks? It seems that there's few configurations and build systems discussed here, so I'm not sure we can tackle all of them at once. Being able to operate on multiple files at once is something we want to look into in a near future (there should be a ticket for it somewhere).

[djforth]

+1 I seems to do nothing when running through webpack

[rxgx]

@kangax Big thanks to @boopathi for explaining the current use case with examples. I believe this is more of a feature request than a specific bug or issue.

[davidgilbertson]

I was getting poor results too because it was only doing a per-file minification. The webpack edition matched the size of UglifyJS (thanks @boopathi)

Chart for the curious.