【发布时间】：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 字节。 ????
【问题讨论】：
标签： javascript laravel vue.js vue-router