Laravel布局JS库按需加载问题：避免未使用页面报错

嘿，这个问题我之前做Laravel项目时也碰到过，核心就是把CKEditor的加载逻辑从全局母版里抽出来，只在真正需要它的页面加载就行。结合Laravel Mix的话，有几个实用方案可以解决：

这种方法不需要改动Mix配置，完全利用Blade的模板继承特性：

• 第一步，修改master.blade.php，把原来的CKEditor脚本和初始化代码删掉，在页面底部的脚本区域添加一个占位区块：

  <script src="{{asset('js/app.js')}}"></script>
  <script src="{{asset('source/admin/assets/js/admin.js')}}"></script>
  {{-- 新增脚本占位区，供子页面注入特定脚本 --}}
  @yield('custom-scripts')
  

• 第二步，在需要使用CKEditor的ckeditor.blade.php页面，通过@section注入CKEditor的脚本和初始化逻辑：

  @extends('master')
  
  {{-- 页面内容... --}}
  
  @section('custom-scripts')
      <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
      <script>
          // 先检查目标元素是否存在，避免不必要的报错
          if (document.getElementById('notification')) {
              CKEDITOR.replace('notification');
          }
      </script>
  @endsection
  

• 不需要CKEditor的页面（比如home.blade.php）完全不用管这个区块，自然不会加载相关脚本，也就不会出现那个类型错误了。

如果你的项目依赖较多，想要优化加载性能，可以用Mix把CKEditor打包成独立的脚本块，按需加载：

• 第一步，在resources/js目录下新建一个ckeditor-init.js文件，编写初始化逻辑：

  // 加载CKEditor
  import CKEDITOR from '/vendor/unisharp/laravel-ckeditor/ckeditor.js';
  
  // 初始化前先检查元素是否存在
  if (document.getElementById('notification')) {
      CKEDITOR.replace('notification');
  }
  

• 第二步，修改webpack.mix.js，把这个文件单独打包：

  mix.js('resources/js/app.js', 'public/js')
     .js('resources/js/admin.js', 'public/js')
     .js('resources/js/ckeditor-init.js', 'public/js')
     .extract(); // 可选：提取公共依赖，进一步优化加载
  

• 第三步，同样在master.blade.php保留@yield('custom-scripts')，然后在需要的页面注入打包后的脚本：

  @section('custom-scripts')
      <script src="{{ asset('js/ckeditor-init.js') }}"></script>
  @endsection
  

这样Mix会帮你处理依赖打包，只有需要的页面才会加载这个独立脚本，既避免了全局加载的冗余，也更符合现代前端的优化思路。

如果不想调整母版的结构，也可以在母版里直接做判断，只有当页面存在需要CKEditor的元素时，才动态加载脚本并初始化：

<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('source/admin/assets/js/admin.js')}}"></script>
<script>
    // 检查页面是否有CKEditor目标元素
    if (document.getElementById('notification')) {
        // 动态创建脚本标签加载CKEditor
        const ckeditorScript = document.createElement('script');
        ckeditorScript.src = '/vendor/unisharp/laravel-ckeditor/ckeditor.js';
        // 脚本加载完成后再初始化
        ckeditorScript.onload = function() {
            CKEDITOR.replace('notification');
        };
        document.body.appendChild(ckeditorScript);
    }
</script>

这种方式不需要修改任何子页面，母版会自动判断是否需要加载CKEditor，简单粗暴但有效。

内容的提问来源于stack exchange，提问作者Quan Nguyen