如何从webpack导入多个模块?

时间:2016-09-23 12:52:45

标签: javascript performance reactjs webpack

我有大约20个jsx个文件,其中少数重复imports,如:

import React from 'react';
import { Form } from 'formsy-react';
import AppActions from '../../utils/actions/app-actions';
import store, {formStore} from '../../utils/stores/stores';
import AppConstants from '../../utils/constants/app-constants';

即使在缩小之后,我的bundle.js重量也超过1.7 Mb。 是否有可能从其他任何地方导入这些模块,这样我就不需要一次又一次地导入这些模块。

1 个答案:

答案 0 :(得分:2)

我认为Webpack,ES6和模块之间存在误解。

Webpack将分析你的javascript代码并检测依赖关系,因为它将包含你的bundle中需要的模块,那里没有重复,每个模块只按正确的顺序添加一次以解决依赖关系同时避免重复的代码。

ES6导入导出语法约定要求在每个需要它们的文件中定义所需的导入,因此Webpack等浏览器或工具可以正确检测依赖关系并仅使用他们需要的文件。

1.7 Mb可以被视为网页的大文件,但通过适当的缓存/缩小,它可以立即加载