code splitting

JavaScript 動態匯入

了解 JavaScript 的這個新功能直到最近，我才有幸使用動態匯入，當時我在一個 Next.js 應用程式中使用它們來分割程式碼，並且我必須進行一些研究，因為它們與靜態匯入有些不同。一個 ES 模組的靜態匯入（預設匯出）的寫法如下： import moment from 'moment' 你可以使用物件解構的方式來取得命名匯出： import { format } from 'date-fns' 靜態匯入有一些限制：它們限制在檔案的頂層它們不能在條件判斷（if）內被載入套件名稱無法在執行時決定動態匯入可以做到所有這些事情！它們的語法略有不同。並且它們可以在模組內使用。使用方式如下： const module = await import('module') 而要使用預設匯出，則必須先呼叫 .default()。以 moment 為例的範例： const moment = (await import('moment')).default() 相反地，命名匯入的使用方式與預期相同： const { format } = await import('date-fns') 你能夠立即使用它們嗎？可以！瀏覽器支援已經相當不錯，並且還有一個Babel 插件可用。

Next.js應用程序捆綁

Next.js如何將你的應用程序代碼分成不同的捆綁包，以及它們包含了什麼。當你查看Next.js應用程序的頁面源碼時，你會看到一堆JavaScript文件正在被加載。讓我們首先將代碼放入一個HTML格式化器中，這樣我們人類可以更好地理解它。 <!DOCTYPE html> <html> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <meta name="next-head-count" content="2" /> <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" /> </head> <body> <div id="__next"> <div> <h1>Home page</h1></div> </div> <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script> <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script> <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script> <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script> <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script> <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script> </body> </html> 我們有4個JavaScript文件被聲明在head中進行預加載，使用rel="preload" as="script"： /_next/static/development/pages/index.js（96行代碼） /_next/static/development/pages/_app....

在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....