在父类和子类中导入模块

Question

我有一个 import _ from lodash 的父类，然后在父类中导入的另一个类也是 import _ from lodash。捆绑的 js 也会有两次 lodash 代码。

//Parent Class
import Component from 'react';
import _ from 'lodash';
import Child from './Child';
class Parent extends Component{
   // using lodash here
} 

// Child class
import Component from 'react';
import _ from 'lodash';
class Child extends Component{
   // using lodash here
}

我正在使用 webpack 来捆绑代码 .. 捆绑的文件会有两次 lodash 代码吗？ 如何理解进口？ 如果是这样..如何防止这种情况发生？ 我认为模块只导入一次，即使它被导入两次..只有它的单个实例会存在？是真的吗？

Answer 1

Webpack 3 或更高版本在进程捆绑时立即运行重复数据删除算法。 如果你使用 webpack plugins 配置中使用 new webpack.optimize.DedupePlugin()。

我建议你通过这个例子导入 lodash 函数，因为你可以只加载必要的函数并减少 bundle 内存使用：

import { isEmpty, findIndex } from 'lodash';
import isEmpty from 'lodash/isEmpty';
import findIndex from 'lodash/findIndex';