javascript - 在父类和子类中导入模块

Question

我有一个父类，它从lodash导入_，然后在父类中导入的另一个类也从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 <2，则可以在 plugins 配置中使用 new webpack.optimize.DedupePlugin()。

我建议您通过此示例导入​​ lodash 函数，因为您可以仅加载必要的函数并减少包内存使用:

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