[全体] app.jsバンドルを分割して閲覧ページのJSペイロードを約84%削減しました

[masaton0216]

概要

public/js/app.js が 3.3MB（gzip 約1MB）に肥大化しており、全ページで読み込まれるためモバイル環境で描画遅延を引き起こしていました。

調査の結果、TinyMCE（~800KB）、tui-image-editor（~500KB）、CodeMirror（~200KB）は編集ページでのみ使用されており、閲覧専用ページには不要でした。また lodash と window.Vue（Vue2互換）は完全に未使用でした。

変更内容

• TinyMCE・tui-image-editor を wysiwyg.js として分離し、wysiwyg.blade.php で条件付き読み込み
• CodeMirror を codemirror.js として分離し、codemirror.blade.php で条件付き読み込み
• 未使用の lodash（window._）と Vue2互換の window.Vue を削除

バンドルサイズの変化

ファイル	サイズ	読み込み対象
app.js（削減後）	532KB	全ページ
wysiwyg.js（新規）	2.08MB	編集ページのみ
codemirror.js（新規）	667KB	コード編集ページのみ

閲覧専用ページ: 3.3MB → 532KB（約84%削減）

レビュー完了希望日

急ぎません

関連Pull requests/Issues

#2370

参考

• webpack の別エントリポイント方式を採用（TinyMCE 等は window.* グローバルとしてBladeテンプレートから同期的に参照されるため、動的 import() ではなく <script> タグの条件付き追加で対応）

DB変更の有無

無し

チェックリスト

• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule

手動テストプラン

ビルド確認

• npm run prod でエラーなくビルドが完了すること
• public/js/ に app.js、wysiwyg.js、codemirror.js が生成されること
• public/mix-manifest.json に3つのJSファイルが含まれること

閲覧ページ（app.js のみ読み込み）

• トップページがブラウザコンソールにエラーなく表示されること
• 固定記事の閲覧ページが正常に表示されること
• ブログ記事一覧・詳細の閲覧ページが正常に表示されること
• 日付ピッカー（Tempus Dominus）が正常に動作すること
• ドラッグ＆ドロップ並び替え（SortableJS）が正常に動作すること

WYSIWYGエディタ（wysiwyg.js 読み込み）

• 固定記事の編集画面でTinyMCEが正常に表示されること
• ブログの新規投稿画面でTinyMCEが正常に表示されること
• TinyMCEで画像のアップロードが正常に動作すること
• TinyMCEでファイルのアップロードが正常に動作すること
• TinyMCE内の画像編集（tui-image-editor）が正常に動作すること

CodeMirror（codemirror.js 読み込み）

• テーマCSS編集画面でCodeMirrorが正常に表示されること
• テーマJS編集画面でCodeMirrorが正常に表示されること
• CodeMirrorでコードの編集・保存が正常に動作すること