router vue 多个路径_解决Vue Router的懒加载路径的方案

Vue Router的懒加载路径的解决方法

单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。

解决办法

.vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。

vue的异步组件

官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定义本身。

const AsyncCom = () => Promise.resolve({ /* component definition */ })

webpack异步模块的引入办法

这个对webpack不同的版本来说，用法有点区别：

webpack版本在1-2之间，可以使用require.ensure来告诉webpack引入了一个异步模块

require.ensure([AYNC_MODULE_PATH], CALLBACK, CHUNK_NAME)

其实require.ensure编译后是一个叫_webpack_require_.e的函数，其本身是一个thenable实例，require.ensure的回调放到_webpack_require_.e.then(fn)里面

为了满足以上两个条件

const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);

webpack>=2的版本可以通过import()来指定动态引入的模块

import('./A.vue') // returns a Promise

Vue Router中的懒加载路径的使用办法

// const A = resolve => require.ensure([], () => resolve(require('./a.vue')), 'A');

const A = () => import('./a.vue')

const router = new VueRouter({

routes: [

{ path: '/a', component: A }

]

})

Tips

组合多个异步模块到一个chunk文件

对不同路径进行按需加载，并不一定非得每个路径产出一个chunk，这个还得按不同的业务和场景进行区分，有时候对于同一个业务下的的小异步模块可以进行合并处理。在webapck版本>2.4时，可以在import引入的时候提供一个/* webpackChunkName: CHUNK_NAME*/注释，来表示chunkname，

const A = () => import(/* webpackChunkName: "group-a-b-c" */ './a.vue')

const B = () => import(/* webpackChunkName: "group-a-b-c" */ './b.vue')

const C = () => import(/* webpackChunkName: "group-a-b-c" */ './c.vue')

// webpack.conf.js

output: {

......

// 使用code-split产出的chunk文件名

chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'),

......

}

总结

以上所述是小编给大家介绍的Vue Router的懒加载路径的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

vue路由懒加载的实现方法

本文介绍了vue的路由懒加载，分享给大家，具体如下：

我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

component可以是一个箭头函数，我们可以使用动态 import语法来定义代码分块点；

如果想在network里面看到动态加载的组件名字，可以加webpackChunkName；

同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName

代码

// router里面的index.js

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'home',

/*

* 使用动态组件，component可以是一个箭头函数

* @表示src目录

* 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName

* network里面动态加载模块名称

*/

component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')

},

{

path: '/todos',

name: 'Todos',

component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')

}

]

})

注意 上面的@代表当前src目录，具体可以去参考webpack的配置

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

// 需要配置的地方

chunkFilename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

}

分析

创建了home和todos两个组件使用了路由懒加载，配置好之后我们执行npm run dev来运行项目，打开network之后刷新一下，我们会发现加载了home.js，我们会发现和上面定义的webpackChunkName名字一样，同时点todos会加载todo.js。这就是路由懒加载的简单使用。

其他

在main.js里面项目的入口我们可以使用template的语法，也可以使用render函数

new Vue({

el: '#app',

router,

components: { App },

/*

* 这里使用的template的语法

* 也可以使用render函数,直接return一个html结构

*/

// template: ''

render() {

return (

)

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。