如何從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導入多個模塊？

回答

相關問題