路由组件按需加载的几种方法

Posted 泪划过你的心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路由组件按需加载的几种方法相关的知识,希望对你有一定的参考价值。

  在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 路由的懒加载和组件的按需加载方法

vue按需加载组件-webpack require.ensure

vue项目优化之按需加载组件-使用webpack require.ensure

vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

React自定义组件之懒加载-LazyLoad。

Linux开机自动加载的几种方法