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-router切换页面时滚动条自动滚动到顶部的方法
- vue router使用query和params传参的使用和区别
- vue router-link传参以及参数的使用实例
- vue-router2.0 组件之间传参及获取动态参数的方法
- vue2 router 动态传参,多个参数的实例
- vue-router路由与页面间导航实例解析
- vue-router实现组件间的跳转(参数传递)
- Vue-Router来实现组件间跳转的三种方法
- Vue-router路由判断页面未登录跳转到登录页面的实例
- Vue.js如何实现路由懒加载浅析
- Vue自定义图片懒加载指令v-lazyload详解
- 详解vue2路由vue-router配置(懒加载)
- vue2组件实现懒加载浅析
- vue2笔记 ― vue-router路由懒加载的实现
- “未能加载文件或程序集“AspNetPager”或它的某一个依赖项。系统找不到指定的路径。”的解决方法
- WPF加载相对路径的图片的解决方法
- spring 打入jar包 xml配置路径,加载异常等常见问题解决方法
- spring boot 本地图片不能加载(图片路径)的问题及解决方法
- 页面加载时同时向两个不同的路径发送ajax请求,笨方法解决
- WPF加载相对路径的图片的解决方法
- frameset布局时frame中src路径的页面没有加载的解决方法
- php命令行(cli)模式下报require 加载路径错误的解决方法
- WPF加载相对路径的图片的解决方法
- php命令行(cli)模式下报require 加载路径错误的解决方法
- frameset布局时frame中src路径的页面没有加载的解决方法
- WPF加载相对路径的图片的解决方法
- 无法加载oracle in oradb10g_home2 odbc驱动程序的安装例程,因为存在系统错误代码998 解决方法
- Win10应用加载失败问题的解决方法
- vtk 使用renderwindowControl 时提示“未能加载文件或程序集” 解决方法
- 关于std::fstream以及std::ifstream打开中文路径名失败的问题和解决方法
- VS2008加载包失败的解决方法
- AS3.0 加载XML#1088 文档中根元素后面的标记格式必须正确,问题解决方法
- VS2005调试dll时提示:“当前不会命中断点,因为还没有为该文档加载任何符号”解决方法
- 因网页中图片太多可能会拖慢加载速度的解决方法