3

我想在 Vue Router 中引入延迟加载，这样部分代码只会按需加载。

我正在关注 Vue Router 中延迟加载的官方文档： 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 Network 选项卡中，但表示它是从磁盘加载的，因此该捆绑包显然是在第一页加载时加载的，这完全违背了延迟加载的想法。

4

1 回答 1

3

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

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

然后，这将显示在您的网络选项卡中，名称为 chunkName “vault”

首先，我猜您正在使用 @vue-cli 查看您的文件结构和 /src 别名。根据您在创建项目时选择的选项，@vue-cli 使用 webpack 配置来预取所有资源的渐进式 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，但您绝对应该自己对结果进行基准测试，并选择最适合您的用户和应用程序的选项。

我很欣赏@vue-cli对这些和许多场景的可配置性。编写你想要的应用程序绝对值得探索，而不是强制你的应用程序配置。

于 2018-04-24T14:18:45.063 回答