Webpack：了解塊和代碼拆分

Question

我最近一直在使用React，並開始嘗試將Webpack整合到我的工作流程中。 但是，我試圖了解有關該工具的更多信息（不幸的是，該文檔不能很好地解釋不同方面的含義）。

在較高的層次上，我了解Webpack允許您創建捆綁的JavaScript文件，以便您可以在多個文件中編寫代碼，但可以將1個文件加載到HTML的腳本標簽中。 Webpack中的塊是什么，它與捆綁過程有什么關系？

另外， 人們還吹捧webpack能夠進行代碼拆分-這到底是什么意思，你們能提供一個例子嗎？

Answer 1

從某種意義上說，“塊”是代碼的一部分，從服務器上按需獲得。 因此，您可以擁有一個主要的可交付成果來加載站點，但是在用戶開始瀏覽時加載其他資源。

實際上，您可以通過定義分割點來實現。 這告訴webpack將運行代碼路徑所需的代碼放在該拆分點（即函數）內的自己的文件中。 然后，Webpack將分解出該拆分的塊和主文件所共有的模塊，並將其放入主文件中，以避免重復供應商代碼（換句話說，該塊可能不會單獨存在）。 現在，Webpack生成兩個文件：主文件和一個附加塊。 當塊的代碼路徑被命中時，主文件將從線中拉出其他塊。 從開發人員的角度來看，這一切都是通過require發生的，這使得推理非常容易。

最常見的用途之一是對路由器代碼進行分塊。 react-router文檔中有一個有效的示例 ，但一般的想法是將初始路由加載到主文件中，所有后續或子路由都可以放在各自的塊中，只有在用戶點擊這些路由時才能下載，（可能）提高性能。 該示例代碼是了解其工作原理的好方法，因為您可以看到在碰到路線時文件被拉斷。

無論如何，代碼分塊是一個了不起的功能。

---

所有這些，請提防過早的優化。 它會殺死生產力。 最好的建議是在沒有任何代碼分塊的情況下開始使用Webpack，然后在需要性能時添加代碼分塊（例如，當您注意到站點的功能或部分很繁重但很少使用時）。

PS：如果您有更具體的問題，很高興修改此答案。 不過，如果您感到好奇，請查看上面的react-router鏈接。

Answer 2

React Router和Webpack可以很好地配合使用，因為您可以在請求路由時自動拆分代碼+動態加載塊。 更好的是，如果將項目設置為使用Webpack 2（+搖樹），則可以使用本機ES6導入和System.import 。

這是如何做：

 import App from 'containers/App'; function errorLoading(err) { console.error('Dynamic page loading failed', err); } function loadRoute(cb) { return (module) => cb(null, module.default); } export default { component: App, childRoutes: [ { path: '/', getComponent(location, cb) { System.import('pages/Home') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: 'blog', getComponent(location, cb) { System.import('pages/Blog') .then(loadRoute(cb)) .catch(errorLoading); } } ] }; 

您可以在此博客文章中獲得整個指南： React Router的自動代碼拆分