在React中的代碼分割
什麼是代碼分割，以及如何在React應用程序中引入它 現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包（包括您的代碼和使用的庫）才能加載首頁，對吧？但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。 該捆綁包將包含一些可能永遠不會運行的代碼，因為用戶只停留在登錄頁，從不看到應用程序的其他部分。 代碼分割是僅在需要時加載JavaScript的一種實踐方式。 這將改善： 應用程序的性能 對內存的影響，以及移動設備的電池使用情況 下載的基於KB（或MB）的大小 React 16.6.0於2018年10月發布，引入了一種進行代碼分割的新方法，它應該取代以前使用的所有工具或庫：React.lazy和Suspense。 React.lazy和Suspense組成了一種完美的方式來懶加載依賴項，並且只在需要時加載它。 讓我們從React.lazy開始。您可以使用它來導入任何組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <TodoList /> </div> ) } 在它可用的時候，TodoList組件將動態添加到輸出中。Webpack將為其創建一個單獨的捆綁包，並在需要時進行加載。 Suspense是一個您可以用於包裝任何懶加載組件的組件： import React from 'react' const TodoList = React.lazy(() => import('./TodoList')) export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) } 它負責處理在懶加載組件被提取和渲染時的輸出。 使用fallback屬性輸出一些JSX或組件： ... <React.Suspense fallback={<p>Please wait</p>}> <TodoList /> </React....