動的インポートのためのWebPackchunknameの修正

怠惰なローディングは、Webアプリケーションの最適化のための熱いトピックです.
私は反応アプリを最適化しようとしていたし、我々はすでに持っているsplitChunks Webpackの設定では、コード分割に注意を払うことができました.
私は、我々の束を分析することを考えましたWebpack Bundle Analyzer を参照してくださいsplitChunks 分割が完了しました.
いくつかの理由で、彼らはかなりランダムだったので、私は名前でチャンクを識別できませんでした1234.asdfd23534kjh346mn63m46.chunk.js
これを解決するためにchunkName インoutput WebPackの設定[name].[contenthash].chunk.jsしかし、まだ運が!バンドルアナライザはまだチャンクの名前を示していた1234.asdfd23534kjh346mn63m46.chunk.js

🚀 Web Search to the rescue, I found Magic Comments in Webpack

そして、私のチャンクを命名するために、私はCodeBaseのすべてのダイナミックな輸入に関して以下に類似しているマジックコメントを加えました

export default Loadable({
  loader: () => import(
    /* webpackChunkName: Dasahboard */
    './containers/Dashboard'
  ),
  loadaing: () => <Spinner />
})

まだ運がない😕

Getting on to more Web Search 💪

それから、私はウェブパックのレポの1つでコメントに遭遇しました:

Turn the comment on in your babel configuration for the project

数分といくつかの試行錯誤に苦労した後、私はBabelの設定でコメントを設定する必要はないと気づいた.私がバベルでプリセットを使っているのでコメントはデフォルトで行われます.
まだ運がない😫. マジックコメントはWebpackに達していません.
魔法のコメント(または任意のコメント)がWebpackに達していない場合は、それらはトランスミクレーションプロセスで失われます.これはBabelの設定で深く掘る必要があるということです.
それから、私はBabel Configurationのプラグインの全てを経験し始めました.

{
  ...
    "plugins": [
    "dynamic-import-webpack",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-object-rest-spread",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ],
  ...
}

プラグインのこのリストから、犯人であるかもしれない唯一のプラグインはそうですdynamic-import-webpackダイナミックなインポートを作る小さなプラグイン?import() 仕事.ここではGitHub - airbnb/babel-plugin-dynamic-import-webpack: Babel plugin to transpile import() to require.ensure, for Webpack
ここで何が特別ですか.REPOのREADMEの最初の行:

Babel plugin to transpile import() to require.ensure, for Webpack.

そして、これはすべてのトラブルを引き起こしていることです.インポートがrequire.ensure ない魔法のコメントです.

解決策として、このプラグインを削除しましたdynamic-import-webpack バベルと魔法のコメントからwebpackで効果を取る.
現在、チャンクは類似した名前を持ちますList. asdfd23534kjh346mn63m46.chunk.js

結論

多くのことが起こっているときにWebPackを設定するトリッキーすることができます.チャンクを適切に命名したい場合次のチェックリストを見てみましょう

chunkName 出力に適切に設定

マジックコメント/* webpackChunkName: MyChunk */ はチャンクの名前に使われる

バベルは、コメントを削除しないように構成されて

プラグインを削除dynamic-import-webpack

ボーナスチップ

用途webpackPrefetch: true マジック・コメントwebpackChunkName . そして、良いキャッシング戦略でサービスワーカーを加えることを考えてください.
これはブラウザ上のファイルをキャッシュし、見つからないチャンクに関連した問題を避けるでしょう(チャンクロードが失敗しました).
使っているように[contenthash] 出力ファイル名では、変更されたモジュールだけがサービスワーカーによって再びキャッシュされます.
コメントで知らせてください💬 またはTwitterで
この記事を参考にしてください🗣
受信トレイに新しい記事を受信するブログを購読する.

クレジット

写真でFerenc Almasi on Unsplash
当初公開https://time2hack.com 2021年(万治元年)1月21日.