Skip to content

webpack の分割チャンク JS が取得されない場合がある #786

Description

@inc2734

フロント側で dist/js/app/app.js から動的 import される webpack チャンク(例: 913.js, 684.js, 998.js など)が生成されている。

これらのファイルは HTML 上の <script> として直接出力されず、app.js 実行後に DOM 条件に応じて runtime で追加読み込みされる。これが環境によっては正しく収集されない可能性がある。

原因:

src/js/app/app.js で import() を使っている。
webpack が dynamic import を code splitting し、数値名のチャンク JS を生成している。
チャンクは初期 HTML から直接参照されないため、静的化サービス等の収集対象から漏れやすい可能性がある。

対象例:

  • src/js/app/layouts.js
  • src/js/app/navigation.js
  • src/js/app/scroll-animation.js
  • src/js/app/loop-animation.js
  • src/js/app/block-link.js

対応方針:

import( /* webpackMode: "eager" */ './...' ) を使い、実行タイミングは維持しつつ別ファイル分割を避ける。
これにより dist/js/app/app.js に同梱され、913.js / 684.js などの数値名チャンクが生成されなくなる。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions