vue 动态路由按需加载

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　在Vue项目中，一般使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

import Hello from \'@/components/Hello\'
import Boy from \'@/components/Boy\'
import Girl from \'@/components/Girl\'

　　这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载

　　1.webpack提供的require.ensure(),这样可以实现按需加载，并且你可以将多个相同类的组件打包成一个文件，只要给他们指定相同的chunkName即可，如示例中的demo将会打包成一个文件。

        {
            path: \'/promisedemo\',
            name: \'PromiseDemo\',
            component: r => require.ensure([], () => r(require(\'../components/PromiseDemo\')), \'demo\')
        },
        {
            path: \'/hello\',
            name: \'Hello\',
            // component: Hello
            component: r => require.ensure([], () => r(require(\'../components/Hello\')), \'demo\')
        }

　　2.Vue的异步组件技术，这种方法可以实现按需加载，并且一个组件会打包成一个js文件

 {
            path: \'/promisedemo\',
            name: \'PromiseDemo\',
            component: resolve => require([\'../components/PromiseDemo\'], resolve)
        }

　　3.es提案的import（），也是我推荐的方法

　　首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

　　第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import(\'./Foo.vue\') // 返回 Promise

　　注意：如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

　　结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import(\'./Foo.vue\')

　　这样做的结果是每个组件都会打包成一个js文件，有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name

const Foo = () => import(/* webpackChunkName: "group-foo" */ \'./Foo.vue\')

以上是 vue 动态路由按需加载 的全部内容， 来源链接： utcz.com/z/380296.html

回到顶部