javascript - react js如何只从文件中导入所需的函数而不是所有函数

Question

这是我的 functions.js 文件

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

---

这是 react 应用程序的主要js文件

import {f1} from './functions';

//在某处使用 f1

---

当我转到网页上的控制台并单击 bundle 时，我可以看到 f2 也正在下载

是否有任何版本的导入方法允许我们只下载我们需要的 js 函数，而不是我们正在导入的文件的所有函数？

为函数创建一个单独的文件是唯一的解决方案??

Answer 1

请升级Webpack到版本 2 或更新版本，因为它支持 tree-shaking这消除了未使用的导出。

由于 Webpack 2 支持原生 ES6 模块，您必须通过配置 babel-loader 预设来禁止 babel 将 ES6 模块转换为 common-js 格式(设置 modules: false 在 es2015 预设中):

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

Tree-shaking 应该适用于此配置，请使用控制台或 Webpack Bundle Analyzer Plugin 检查.