javascript - 动态导入会分割代码但不会延迟加载

Question

我想为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,
        },
    ],
});

一切都很好，但是，当我第一次打开应用程序时，提取的本应延迟加载的包会预先加载:

当我使用路由器进入该 View 时，它再次出现在“开发工具网络”选项卡中，但说它是从磁盘加载的，因此 bundle 显然是在第一页加载时加载的，这完全违背了惰性的想法正在加载。

Answer 1

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

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

这将显示在以 chunkName“vault”命名的网络选项卡中

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

其次，您可以选择禁用预取插件。 @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对于这些和许多场景。编写您想要的应用程序绝对值得探索，而不是将您的应用程序强制到配置。