Laravel应用结合Vue路由实现Vue组件懒加载异常问题

核心问题根因 #

• 旧版require.ensure写法引发的资源破坏：Laravel Mix默认基于webpack的配置下，require.ensure的代码分割逻辑未适配Laravel的静态资源目录规则，会生成无命名的零散chunk（如0.js），且破坏全局CSS提取流程，导致原有JS/CSS运行异常
• 动态import无懒加载效果：要么是webpack版本不支持原生动态import语法，要么是动态import的路径被webpack静态分析直接纳入主包，要么是异步chunk的公共路径配置错误，导致加载逻辑被预加载
• 动态导入后主app.css大小为0字节：异步组件的样式提取规则与主包样式提取逻辑冲突，Laravel Mix默认配置没有匹配代码分割的输出路径，导致样式被错误归类，主包样式文件没有正确写入内容
• 具名<router-view>配置适配问题：原配置中使用具名路由出口，若组件导入方式错误，会直接导致组件无法挂载，连带资源加载逻辑异常

分步实现正确懒加载 #

1. 替换所有错误的组件导入写法 #

完全淘汰require.ensure这类旧版分割写法，统一使用Vue Router官方推荐的动态import语法：

// router.js 中的正确导入写法
import Vue from 'vue';
import Router from 'vue-router';

// 标准懒加载导入，明确指定chunk名
const Test = () => import(
    /* webpackChunkName: "js/components/Test" */ './components/Test.vue'
);

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: '/', // 适配Laravel应用部署的根路径
    routes: [
        {
            path: '/',
            components: {
                test: Test // 对应blade页面里的<router-view name="test">
            }
        },
        {
            path: '/news',
            components: {}
        }
    ]
});

2. 修正Laravel Mix配置解决样式丢失问题 #

调整webpack.mix.js的代码分割规则，匹配异步chunk的输出路径，解决主css为0字节、异步样式加载失败的问题：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   // 关键配置：适配webpack代码分割规则
   .webpackConfig({
       output: {
           // 统一指定异步chunk的输出路径，避免生成零散0.js类文件
           chunkFilename: 'js/chunks/[name].js?id=[chunkhash]'
       },
       optimization: {
           splitChunks: {
               chunks: 'all', // 分割所有公共依赖
               automaticNameDelimiter: '_'
           }
       }
   })

配置说明：该设置会让webpack自动将异步组件对应的样式提取到和chunk同路径的css文件中，既不会将所有组件样式挤压到主包css里，也不会因为路径不匹配导致样式加载失败

3. 修正原有代码中的语法错误 #

原Test.vue中存在JS语法问题，会直接导致模块编译失败、样式提取异常，需要调整为：

<template>
    <div>
        <h1>This is a test</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('hey, this is from test.vue');
        }
    }
</script>

<style lang="scss" scoped>
// 组件自定义样式
</style>

注意：原代码将console.log写在了export default语句的外层，属于模块语法错误，会导致整个组件模块编译中断，连带样式提取流程失效

4. 适配Laravel与Vue的混合路由规则 #

为了避免Laravel服务端路由拦截Vue前端路由、静态资源请求，需要在routes/web.php中配置全局兜底规则：

// 所有非静态文件的请求都指向主应用blade模板
Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

效果验证 #

• 初始页面加载时，仅加载主包app.js和app.css，不会提前加载Test组件对应的JS、CSS资源
• 当路由匹配到需要加载Test组件的路径时，Network面板会按需加载对应js/chunks/components_Test.js和同名css文件，无0.js这类无意义命名的零散chunk
• 全局原有JS、CSS功能完全正常，主包css文件大小恢复正常

内容的提问来源于stack exchange，提问作者Brad Ahrens