Tree Shaking simplified with Webpack!

  • Declare all your imports and exports for each of your modules.
  • The bundler (Webpack, Rollup, etc.) will analyze the dependency tree during your compilation step.
  • Any unused code that can be proved is automatically dropped from your final bundle or tree shaken.

Tree Shaking with Webpack

// webpack.config.js 
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: babel-loader,
          /* This configuration aids babel-preset-env to disable transpiling of import or export modules to commonJS */
          options: {
            presets: [
              [ 'es2015', { modules: false }]
            ]
          }
        }
      }
    ]
  },
  plugin: [ new HtmlWebPackPlugin ({ 
    template: './src/index.html',
    fileName: './index.html'
  });
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store