在 Laravel 应用程序中延迟加载 vue 组件 - 不加载

Posted 2023-02-15

【中文标题】在 Laravel 应用程序中延迟加载 vue 组件 - 不加载

【英文标题】：Lazy load vue components in a Laravel application - Not loading

【发布时间】：2021-07-07 14:01:41

【问题描述】：

TLDR

您如何在 Laravel 应用程序中正确延迟加载 Vue 组件，除了使用 Laravel 自己的 Web 路由之外，还使用 ​​Vue 路由？

全文：

我有一个使用 Vue 的 Laravel 应用程序。现在应用程序的大小已经大大增加，我想延迟加载 Vue 组件。

为此，我设置了以下文件：

app.js router.js Test.vue app.blade.php home.blade.php news.blade.php

如果我像这样导入：import Test from './components/Test';，那么一切正常，但组件不会延迟加载。

如果我像这样导入

const Test = resolve => 
    require.ensure(['./components/Test'], () => 
        resolve(require('./components/Test'));
    );

然后，组件被延迟加载。我可以告诉这一点，因为我正在登录控制台。但是，这似乎破坏了所有其他 JS 和 CSS。

我还可以看到在“网络”选项卡中创建的新 JS 文件。它会创建一个 0.js 文件。

基于this other question，我也试过了：

function loadView(view) 
    return () => import(/* webpackChunkName: "[request]" */ `./components/$view.vue`)

这里一切正常，但组件没有延迟加载。

app.js

import Vue from 'vue';
import router from './router.js';

new Vue(
    el: '#app',
    router
)

router.js

import Vue from 'vue';
import Router from 'vue-router';
// import Test from './components/Test'; // Everything works, but doesn't lazy load

// Lazy loads and logs to the console, but breaks all of the other JS and the CSS
const Test = resolve => 
    require.ensure(['./components/Test'], () => 
        resolve(require('./components/Test'));
    );


// Also tried this way, which works, but does not lazy load
// function loadView(view) 
//     return () => import(/* webpackChunkName: "[request]" */ `./components/$view.vue`)
// 

Vue.use(Router);

export default new Router(
    routes: [
        
            path: '/',
            components: 
                test: Test
                // test: loadView('Test') // 
            
        ,
        
            path: '/news',
            components: 
        
    ],
    mode: 'history',
);

Test.vue

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

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

<style lang="scss" scoped>
</style>

app.blade.php

在正文中包含<div id="app"></div>

home.blade.php

包括<router-view name="test"></router-view>

news.blade.php

还包括<router-view name="test"></router-view>，只是为了测试。

更新 1：

基于这个问题：Lazy Loading Components not working with Vue Router，我已经更新了loadView 函数，但是我仍然无法加载 CSS。

function loadView(view) 
    return () => import(`./components/$view.vue`)

更新 2：

基于这个问题：vuejs lazy loading components without the router，我尝试导入组件并将其设置为常量：

const Test = () => import(
  /* webpackChunkName: "./js/Test" */ './components/Test'
)

延迟加载完美运行，但 CSS 仍然无法加载。

更新 3：

在使用import Test from './components/Test';时，我注意到app.css文件成功编译为560 KiB。

但是，当使用const Test = () => import(/* webpackChunkName: "./js/Test" */ './components/Test'); 时，同一文件无法编译，而是保持为 0 字节。 ????

【参考方案1】：

这里的问题在于 Webpack 而不是 Vue 路由器。路由工作正常，但如更新 3 中所述，app.css 将编译为 0 字节。

我注意到这是其他人也遇到的常见问题。我发现的最佳解决方案来自 Daljeet Singh（又名 Ilamp）的评论：https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-628791041

为了节省您的点击次数，他这样做了：

安装 laravel-mix-merge-manifest

npm install laravel-mix-merge-manifest --save-dev

webpack.css.mix.js

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.sass('resources/sass/app.scss', 'public/css')
  .version();

if (!mix.inProduction()) 
  mix.sourceMaps();


mix.mergeManifest();

webpack.js.mix.js

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.react('resources/js/app.js', 'public/js')
  .extract([])
  .setPublicPath('public')
  .version();

if (!mix.inProduction()) 
  mix.sourceMaps();


mix.mergeManifest();

将 package.json 的脚本部分更新为：

    "dev": "npm run development-js && npm run development-css",
    "development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "prod": "npm run production-js && npm run production-css",
    "production-js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "production-css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "watch": "npm run development-js -- --watch & npm run development-css -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",

快乐编码?