[パフォーマンス] app.cssからWYSIWYGエディタ用CSSを分離

[masaton0216]

背景

app.css（296KB）には全ページで必要なBootstrap/FontAwesome/レイアウトCSSに加えて、WYSIWYGエディタ使用ページでしか必要のないCSS（Toast UI ImageEditor、WYSIWYGエディタスタイル）が含まれています。

これらを分離し、WYSIWYGエディタを使用するページでのみ読み込むようにすることで、一般閲覧ページのCSS転送量を削減します。

調査結果

現状のapp.scssの構成

ファイル: resources/sass/app.scss

// Variables & Bootstrap（全ページで必要）
@import "variables";
@import "~bootstrap/scss/bootstrap";

// FontAwesome（全ページで必要）
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

// Tempus Dominus（全ページで読み込み）
@import '~@eonasdan/tempus-dominus/src/scss/tempus-dominus';

// Connect-CMSレイアウト（全ページで必要）
@import 'mixin/layout';
@import 'layout/header';
// ... 他レイアウト

// Toast UI ImageEditor UI（WYSIWYGエディタ使用ページのみ必要）  ← 分離対象
@import 'toast-ui-image-editor/ui';

// WYSIWYG Editor styles（WYSIWYGエディタ使用ページのみ必要）  ← 分離対象
@import 'wysiwyg/editor';

// Plugin specific styles（全ページで必要）
@import 'plugins/menus';
@import 'plugins/photoalbum';

スコープ外とした項目

Tempus Dominus CSSの分離

影響調査の結果、Tempus Dominus CSSはgzip圧縮後で約3.7KB（app.css全体の約7%）に過ぎず、分離の効果が薄いことが判明しました。一方、日付ピッカーを使用するbladeテンプレートは複数リポジトリにわたり多数存在するため、影響範囲に対して効果が見合わないと判断し、今回はスコープ外とします。

実装手順

Step 1: WYSIWYGエディタ用CSSを分離

新規作成: resources/sass/wysiwyg-editor.scss

@import 'toast-ui-image-editor/ui';
@import 'wysiwyg/editor';

変更: resources/sass/app.scss

• 29行目 @import 'toast-ui-image-editor/ui'; を削除
• 32行目 @import 'wysiwyg/editor'; を削除

変更: webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()
    .js('resources/js/wysiwyg.js', 'public/js')
    .js('resources/js/codemirror.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/wysiwyg-editor.scss', 'public/css');  // 追加

変更: resources/views/plugins/common/wysiwyg.blade.php

wysiwyg.jsの条件付き読み込みと同じ箇所で、CSSも条件付きで読み込む（static変数で重複読み込みを防止）:

@if (!isset($__wysiwyg_css_loaded))
    @php $__wysiwyg_css_loaded = true; @endphp
    <link href="{{ url('/') }}{{ mix('css/wysiwyg-editor.css') }}" rel="stylesheet">
@endif

検証方法

1. npm run prod でビルドが成功すること
2. public/css/ に wysiwyg-editor.css が生成されること
3. public/mix-manifest.json に新しいCSSファイルが含まれること
4. 一般閲覧ページで wysiwyg-editor.css がロードされないことをNetwork タブで確認
5. WYSIWYGエディタ（ブログ投稿画面等）でTinyMCEのスタイルが正常に適用されること
6. tui-image-editorのスタイルが正常に適用されること
7. 一般ページ・管理画面が正常に表示されること