Skip to content
This repository was archived by the owner on Mar 16, 2020. It is now read-only.
This repository was archived by the owner on Mar 16, 2020. It is now read-only.

Optimizing webpack build with babel & babili #8

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions