Next.js中的延遲加載模塊

如何在Next.js應用程序中延遲加載模塊

能夠以可視方式分析捆綁軟件非常有用,因為我們可以非常輕鬆地優化應用程序。

假設我們需要在博客文章中加載Moment庫。跑:

npm install moment

將其包括在項目中。

現在讓我們模擬一個事實,我們需要在兩條不同的路線上使用它:/blog/blog/[id]

我們將其導入pages/blog/[id].js

import moment from 'moment'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>Published on {moment().format(‘dddd D MMMM YYYY’)}</p> <p>{props.post.content}</p> </div> ) }

我以今天的日期為例。

如您所見,它將在博客文章頁面捆綁中包含Moment.js。npm run analyze

看到我們現在有一個紅色條目/blog/[id],就是我們添加Moment.js的路線!

它從〜1kB變為350kB,這是一個很大的數目。這是因為Moment.js庫本身為349kB。

現在,客戶捆綁包可視化向我們顯示,更大的捆綁包是第一頁,以前很少。而且其代碼的99%是Moment.js。

每次加載博客文章時,我們都會將所有這些代碼傳輸到客戶端。這是不理想的。

一種解決方法是尋找一個較小的庫,因為Moment.js並不以輕量級而著稱(尤其是開箱即用,包括所有語言環境),但為示例起見,我們必須使用它。

相反,我們可以做的是將所有Moment代碼分隔在一個單獨的捆綁

如何?而不是在組件級別導入Moment,而是在內部執行異步導入getInitialProps,然後我們計算要發送給組件的值。請記住,我們無法在getInitialProps()返回的對象,因此我們計算其中的日期:

import posts from '../../posts.json'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>Published on {props.date}</p> <p>{props.post.content}</p> </div> ) }

Post.getInitialProps = async ({ query }) => { const moment = (await import(‘moment’)).default() return { date: moment.format(‘dddd D MMMM YYYY’), post: posts[query.id] } }

export default Post

看到那個特別的電話.default()await import?需要在動態導入中引用默認導出(請參見https://v8.dev/features/dynamic-import

現在,如果我們運行npm run analyze再次,我們可以看到:

我們的/blog/[id]包再次很小,因為Moment已被移動到其自己的包文件中,並由瀏覽器單獨加載。

免費下載我的Next.js手冊


接下來的更多教程: