Optimizing webpack build with babel & babili

[boopathi]

The current build sequence for a typical webpack project is transpile -> bundle -> minify. As babili doesn't traverse through Objects and its properties (yet), there will not be much optimizations on the bundler generated code (modules[moduleId].call()) other than mangling and whitespace/comments removal. The pipeline can be transformed to (transpile + minify) -> bundle - if the bundler already produces mangled and has an option to output minified (just the syntax and comments) code. But, we could already do this now -

1. transpile + minify (mangle=false)
2. bundle - remove dead code module level (tree-shaking?)
3. mangle + deadcode(if required) + minify(syntax, comments)

// stage 1
{
  loader: 'babel-loader'
  presets: [
    'es2016',
    'react',
    [
      'babili', { // <- options not yet supported (https://github.com/babel/babili/pull/162)
        mangle: false // this will be performed on the entire bundle.
        deadcode: false // not tested which is better for deadcode - stage1 or 3 - just an idea
      }
    ]
  ]
}

// stage 2
bundle - webpack

// stage 3
new BabiliWebpackPlugin({
  mangle: true, // <- option not yet supported
  deadcode: true, // <- option not yet supported
  [everythingelse]: false // <- just a notation
  comments: false,
});
// or 
babel.transform(bundledcode, {
  minified: true, // syntax
  compact: true,
  comments: false,
  plugins: ["mangle", "deadcode"]
})

From babel/website#898 (comment) - edited and added more description

[boopathi]

babel/minify#162 is merged ..

[nodaguti]

Just for your information:

With babel/minify#162 shipped, we can now pass options to Babili through the babili property like this:

new BabiliWebpackPlugin({
  babili: {
    presets: [
      [
        require('babel-preset-babili'),
        {
          mangle: { topLevel: true },
          deadcode: false,
          removeConsole: process.env.NODE_ENV === 'production',
        },
      ],
    ],
    plugins: [
      'transform-inline-environment-variables',
    ],
  },
}),

[icd2k3]

I've tried setting up my webpack plugin config as above, but I still end up with compiled code that is actually larger than just using uglify-webpack-plugin... Any ideas of things I could try? I've tried lots of combinations of config/babelrc but each produces a build larger than that of uglify which doesn't seem right?

Currently this will produce bundles...
Uglify: 325.1kb
Bibili: 339.4kb

.babelrc

{
  "presets": [
    [
      "es2015",
      {
        modules: false
      }
    ],
    "es2017",
    "react",
    "stage-0",
  ],
  "plugins": [
    "transform-object-assign"
  ],
  "env": {
    "production": {
      "presets": ["babili"]
    }
  }
}

webpack.config.js

//...
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test    : /\.js$|\.jsx$/,
        exclude : [
          /node_modules/,
          /\.spec\.js$/
        ],
        loaders : [
          'babel-loader',
          'eslint-loader'
        ],
      },
    ],
  },
  plugins: [
    new BabiliPlugin({
      test: /\.js$|\.jsx$/,
      babili: {
        presets: [
          [
            require('babel-preset-babili'),
            {
              mangle: { topLevel: true },
              deadcode: false,
              removeConsole: true,
            },
          ],
        ],
      },
    }),
  ],
//...

[mosesoak]

I'm having the same issue as @icd2k3, the plugin is not doing any basic minification (whitespace removal).

It does seem to be running, since I am using typescript so I need to pass test: /\.tsx?$/, in the 2nd parameter for 'overrides' to get it to run without error.

I'm not trying to do any custom configurations, just get basic minification working. Any idea why it would run without error but fail to minify?

The files are React + es6 + typescript.

[mosesoak]

(I should add that I did not include a .babelrc file in my project since from your docs it seems like I can just used the options/overrides objects in the plugin.)

[seansd-zz]

Yes for me the minify of variables and what not is happening but agree that white space not getting stripped

[aseem2625]

@boopathi There is a confusion..
This used to work as of version "babili-webpack-plugin": "0.0.11". It has stopped working now. I don't want to have .babelrc file and trying with this also doesn't help

Below works.

    new BabiliPlugin({
      mangle: { 'topLevel': true },
      deadcode: true
    }),

But it doesn't conform to the README.md

What's the correct way of using it as per latest version? Can you please help!

[qm3ster]

Is there really a reason to use this strategy?
So far, I have seen that basically every rule I leave enabled improved bundle size, even without node_modules dependencies.
When would you need to optimize for compile time rather than bundle size?