react js how to import only the required function from a file and not the all functions

Question

this is my functions.js file

export const f1 =()=>
{
console.log('palashf1');
}
export const f2 =()=>
{
console.log('palashf2');
}

---

and this is the main js file for react application

import {f1} from './functions';

// using f1 somewhere

---

when I go to console on my webpage and click the bundles I can see that f2 is also getting downloaded

Is there any version of import method that allows us to download only the js function we need and not all the functions of the file from where we are importing ?

creating a separate file for the function is the only solution ??

Answer 1

Please upgrade Webpack to version 2 or newer as it supports tree-shaking which eliminates unused exports.

As Webpack 2 supports native ES6 modules you must disable babel from transpiling ES6 modules to common-js format by configuring babel-loader presets (set modules: false in the es2015 preset):

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      [
        'es2015', {
          modules: false
        }
      ]
      ...
    ]
  }
}

Tree-shaking should work with this configuration, inspect with the console or Webpack Bundle Analyzer Plugin.