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

Question

长篇小说

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

全文:

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

为此，我设置了这些文件:

• 应用程序.js
• 路由器.js
• 测试.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`)
}

此处一切正常，但组件未延迟加载。

应用程序.js

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

new Vue({
    el: '#app',
    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',
});

测试.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>

应用程序.blade.php

• 包括<div id="app"></div>体内

home.blade.php

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

新闻.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 字节。 🤔

Answer 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",

快乐编码🤓