如何从webpack导入多个模块？

我已经约20 jsx文件与几个重复imports，如：如何从webpack导入多个模块？

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。是否有可能从其他地方导入这些模块，以便我不需要一次又一次导入这些模块。

来源

2016-09-23 Hashir Hussain

的WebPack插入每个需要的模块只有一次进入束（除了一些边缘情况），即使它被引用了20次。所以这不是什么导致你的包变得很大。你通常不关心开发中的大小，但在生产中，你应该做所有的最小化步骤，如uglify和compress。你也可以[将包分成多个]（https://webpack.github.io/docs/code-splitting.html）。 –

在生产中，如果重复的文件确实是您的问题，您可以使用DedupePlugin确保每个文件仅包含一次。重复导入不会导致重复的文件 - Webpack将仍然包含每个模块一次。对于缩小的捆绑包，1.7MB看起来相当大。 –

尝试使用该工具，并调查您的模块https://chrisbateman.github.io/webpack-visualizer/的大小 – Everettss

我认为这里的WebPack，ES6和模块之间的误解。

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

ES6进出口语法公约要求来定义你在每一个需要他们的文件需要进口，所以浏览器或工具，如可以的WebPack正确检测依赖和只使用他们需要的文件。

1.7 MB可以被看作是一个大文件的网页，但有一个正确的缓存/缩小它可以立即加载

来源

2016-09-23 13:01:17 Giu

1.7 MB的所有微小的过程之后。是因为我写的代码的级别..？请建议。 –

1.7 MB的Reactjs项目并不坏，如果你有反应的路由器，终极版等，也可以是相当大的很轻松，没有错 – Giu

好吧，但我怎样才能让我的网页加载速度更快？ –

如何从webpack导入多个模块？

回答

相关问题