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的懒加载路径的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- visual studio 2012 的制作ActiveX、打包和发布
- 用java提交一个Spark应用程序
- 一步步教你利用Github开源项目实现网络爬虫:以抓取证券日报新闻为例
- 用linqPad帮助你快速学习LINQ
- Java 8 Stream 教程 (二)
- CountVectorizer
- Caliburn.Micro学习笔记(五)----协同IResult
- 一个Pythoner的自我修养系列(一)
- 众里寻她千百度,蓦然回首,那bug却在灯火阑珊处
- Github|Python开源项目漫游指南(一)
- Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能
- .NET 4 System.Threading.CountdownEvent
- java与ruby的直观比较
- 每天一个Linux命令:chmod
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《springboot实战》
- 360全国大学生信安技术大赛记录
- gh0st源码分析与远控的编写(四)
- 记一次Elasticsearch优化总结
- unix环境高级编程(上)-文件篇
- php webshell下直接反弹shell(不借助任何其他语言)
- XssHtml – 基于白名单的富文本XSS过滤类
- unix环境高级编程(下)-高级IO和进程间通信篇
- mybatis原理,配置介绍及源码分析
- web.py使用不当可能造成代码执行
- 《redis设计与实现》1-数据结构与对象篇
- 《redis设计与实现》2-数据库实现篇
- 利用location来变形我们的XSS Payload
- docker-compose部署单机版本分片mongo
- 一个前端DOMXSS过滤器