React js how to import just the function you want from a file, not all functions
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 in my webpage and click packages i see f2 is also loading
Is there any version of the import method that allows us to load only the js function we need and not all the functions of the file we are importing from?
creating a separate file for the function is the only solution
source to share
Upgrade Webpack to version 2 or newer as it supports tree-shaking , which eliminates unused exports.
Since Webpack 2 supports native ES6 modules, you should disable babel
from forwarding ES6 modules to common-js format by configuring babel-loader
presets (set modules: false
to preset es2015
):
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'es2015', {
modules: false
}
]
...
]
}
}
Interacting with trees should work with this config, inspect the console or Webpack Bundle Analyzer Plugin .
source to share