如何在Laravel Blade文件中初始化指定JS模块，避免加载大文件？

我来帮你搞定这个问题～核心原因是resources/assets属于项目的源码目录，并不是Web服务器的公开访问目录（Web根目录是public/），所以你直接用<script>标签引用这个路径，浏览器会返回404。得借助Laravel的前端构建工具（Vite或Mix）把模块打包到公开目录，再挂载到全局对象上，这样Blade里就能直接调用了。

方案一：适用于Laravel 9+（默认使用Vite） #

1. 创建模块入口文件
   在resources/assets/js目录下新建module-entry.js，内容如下：

// 导入你的模块
import { Module } from './components/Module';
// 将模块挂载到window全局，这样Blade里就能访问到
window.Module = Module;

2. 修改Vite配置
   打开项目根目录的vite.config.js，把刚才的入口文件添加到构建配置中：

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/module-entry.js' // 新增这个入口
            ],
            refresh: true,
        }),
    ],
});

3. 构建资源
   运行对应的构建命令：

• 开发环境（支持热重载）：npm run dev
• 生产环境（压缩优化）：npm run build

4. 在Blade中引入并调用
   在需要加载模块的Blade文件里，用Laravel的@vite指令引入打包后的资源，然后调用初始化方法：

@vite('resources/js/module-entry.js')
<script>
    // 确保DOM加载完成后再初始化
    document.addEventListener('DOMContentLoaded', function() {
        Module.init();
    });
</script>

方案二：适用于Laravel 8及以前（使用Laravel Mix） #

1. 创建模块入口文件
   同样在resources/assets/js下新建module-entry.js：

import { Module } from './components/Module';
window.Module = Module;

2. 修改Mix配置
   打开webpack.mix.js，添加这个入口文件的打包规则：

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/module-entry.js', 'public/js') // 单独打包该模块
   .sass('resources/sass/app.scss', 'public/css');

3. 构建资源
   运行构建命令：

• 开发环境：npm run dev
• 生产环境：npm run production

4. 在Blade中引入并调用
   用Laravel的asset()函数生成公开资源的URL，然后调用初始化：

<script src="{{ asset('js/module-entry.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        Module.init();
    });
</script>

额外提示 #

• 这个方案只会在你引入的Blade页面加载该模块，不会影响其他页面，符合你"仅在单个页面加载"的需求。
• 开发环境下，构建工具会自动监听文件变化并刷新页面，修改模块代码后无需手动重新构建。

内容的提问来源于stack exchange，提问作者Jerry Li