Next.jsでの遅延読み込みモジュール

Next.jsアプリでモジュールを遅延ロードする方法

アプリケーションを非常に簡単に最適化できるため、バンドルを視覚的に分析できることは素晴らしいことです。

ブログ投稿でモーメントライブラリをロードする必要があるとします。実行:

npm install moment

プロジェクトに含めるため。

次に、2つの異なるルートで必要になるという事実をシミュレートしましょう。/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であるためです。

クライアントバンドルの視覚化により、以前は非常に小さかった、より大きなバンドルがページ1であることがわかります。そして、そのコードの99%はMoment.jsです。

ブログ投稿をロードするたびに、このすべてのコードがクライアントに転送されます。これは理想的ではありません。

Moment.jsは軽量であることが知られていないため(特にすべてのロケールが含まれている箱から出して)、1つの修正は、より小さなサイズのライブラリを探すことですが、例のために使用する必要があると仮定しましょうそれ。

代わりにできることは、すべてのモーメントコードを別のバンドル

どうやって?コンポーネントレベルで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ハンドブック


その他の次のチュートリアル: