Question

我想向Vue Router引入延迟加载，以便只在需要时加载代码的某些部分。

我按照Vue路由器中的延迟加载的官方文档： https://router.vuejs.org/en/advanced/lazy-loading.html

因此，对于测试，我已经更改了在我的路由器文件中导入Vault模块的方式：

import Vue from 'vue';
import Router from 'vue-router';

// Containers
import Full from '@/containers/Full';

// Views
// TODO: views should be imported dynamically
import Dashboard from '@/views/Dashboard';
const Vault = () => import('@/views/Vault');
import Page404 from '@/views/Page404';
import Page500 from '@/views/Page500';
import Login from '@/views/Login';

Vue.use(Router);

export default new Router({
    routes:         [
        {
            path:      '/',
            redirect:  '/dashboard',
            name:      'VENE',
            component: Full,
            children:  [
                {
                    path:      'dashboard',
                    name:      'dashboard',
                    component: Dashboard
                },
                {
                    path:      'vault',
                    name:      'vault',
                    component: Vault
                },
            ],
        },
        {
            path:      '/login',
            name:      'Login',
            component: Login,
        },
        {
            path:      '/404',
            name:      'Page404',
            component: Page404,
        },
        {
            path:      '/500',
            name:      'Page500',
            component: Page500,
        },
    ],
});

一切都很好，但是，当我第一次打开应用程序时，提取的捆绑本应该是延迟加载的，在前面加载：

当我使用路由器进入该视图时，它再次显示在Dev Tools网络选项卡中，但是说它是从磁盘加载的，所以捆绑包在第一页加载时明显加载，这完全是对的延迟加载的想法。

Answer 1

出现这种情况有几个原因。我应该说，您已经为延迟加载Vault组件正确设置了所有内容。一个提示，我发现将webpack块名称添加到动态导入是有帮助的：

const Vault = () => import(/* webpackChunkName: "vault" */ '@/views/Vault')

然后，这将显示在以chunkName＆＃34; vault＆＃34;

命名的网络选项卡中

首先，我猜测你正在使用@ vue-cli查看你的文件结构和/ src别名。根据您在创建项目时选择的选项，@ vue-cli使用webpack配置为prefetches all resources的渐进式Web应用程序。虽然浏览器具有优先处理这些下载的机制，但我发现某些预取似乎会阻止其他资源。预取的好处是对于不支持服务工作者的浏览器，您使用空闲浏览器时间将资源放入用户最终可能最终使用的浏览器缓存中。当用户确实需要该资源时，它已经被缓存并准备就绪。

其次，您可以选择禁用预取插件。 @ vue-cli提供了用于覆盖默认配置的转义符号。只需编辑或添加vue.config.js到项目的根目录即可。

courtesy @LinusBorg 

// vue.config.js
chainWebpack: (config) => {

  // A, remove the plugin
  config.plugins.delete('prefetch')

  // or:
  // B. Alter settings:
  config.plugin('prefetch').tap(options => {
    options.fileBlackList.push([/myasyncRoute(.)+?\.js$/])
    return options
  })
}

- 请务必仅使用选项A 或选项B;不是都。 -

来源：https://github.com/vuejs/vue-cli/issues/979

我已成功使用选项A，但您应该自己对结果进行基准测试，并选择最适合您的用户和应用的选项。

我很欣赏这些和许多场景的configurability of @vue-cli。绝对值得探索编写您想要的应用程序，而不是强迫您的应用程序进行配置。

动态导入会拆分代码，但不会延迟加载

1 个答案: