关于vue 动态引入(异步加载import和require)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度
前言:
最近在改造vue-cli 2.x + webpack2.x的项目时,由于之前路由是静态的,没有根据菜单权限动态生成前端路由。所以想对此进行改造,然后碰到了一些问题和坑,现在总结一下,避免以后继续踩坑。
先来说一下vue项目,组件懒加载的几种方式。
1. require(AMD规范)
{path: '/demo',name: 'Demo',component: resolve => require(['../components/Demo/index'], resolve)
}
这种方法可以实现按需懒加载,并且一个组件会打包成一个js文件.
但是这里有一个坑,如果你的组件是在Demo目录下的index.vue组件,你的组件路径必须精确到/index, 如果只是到demo,是会找不到对应的组件的。
这种方式有个弊端, 就是不能指定某几个组件打包到同一个js里。
2. import (ES6提案推荐)
{name: Demo,path: /demo,component: () => import(`@/views/${url}`)
}
这种方法可以实现按需懒加载,并且一个组件会打包成一个js文件。也可以加上/* webpackChunkName: "[name]" */, 将不同组件打包到同一个js文件中,如:
() => import(/* webpackChunkName: "[name]" */ `@/views${url}`)
[name]就是要指定的分类的名字
这里也有一个坑,如果你项目用的是webpack2.x的版本,那么import里面是不能带参数的,比如上面那个例子,组件是引入失败的。
官方解释: 大致意思说说传的变量有可能和系统某个其他文件或者路径重名,所以import的路径必须要尽量详细点。但是到底要多详细,你可以自己去试,所以我直接放弃了。
报错:Cannot find module "."
at webpackMissingModule......
webpack2.x的版本还有别的问题,用import且带参数的时候,编译会报警告:
Critical dependency: the request of a dependency is an expression
老版本的webpack只能是纯字符串的路径引入。但是也有小伙伴说路径多加几个层级就能带参数,但是我试过只加一层@/pages/, 是不行的。一般我们的组件路径也不会有很多层,所以我放弃了import,直接用了require的方式。
当然,如果你确实想用import,那就把webpack升级到4.x的版本,4.x的版本不存在这个问题。
但是webpack2.x升级到webpakc4.x,在vue中又需要更改一系列的配置,估计还得踩一部分坑。
3. require.ensure
webpack2.x的版本还能用require.ensure方式加载,如下:
{name: 'Demo',path:'/demo'component: r => require.ensure([], () => r(require(`@/views${url}/index`)), 'index')
}
require.ensure()接受三个参数: 第一个参数的依赖关系是一个数组,代表了当前需要进来的模块的一些依赖; 。第二个参数回调就是一个回调函数其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则的的的的WebPack就无法静态分析的时候处理它; 第三个参数chunkName则是指定打包的组块名称。
但是chunkName不能是参数,只能是string.
4. 关于plugin-syntax-dynamic-import
如果用了import语法,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。不过,这个插件不需要单独安装,因为:
所以这也是为什么我们在babel的配置文件里需要配置@babel/.preset-env的原因
或者:
5. 关于babel-plugin-dynamic-import-node
上面是官方解释: 也就是将import方法转成require(),且是动态的。
运用这个插件能在代码使用了import语法的情况下,大大提高代码的编译速度。
配置:
vue.cli2.x
.babelrc文件中,
"env": {"test": {"plugins": []},"development":{"presets": ["env", "stage-2"],"plugins": ["dynamic-import-node"]}}
babel.config文件中,
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],'env': {'development': {'plugins': ['dynamic-import-node']}}
}
6. 关于router.addRoutes
vue 提供了动态添加路由的方法。
关于vue router, 我们知道正常我们定义静态路由都是在new Router的时候就把所有的路由都定义好,这样在new Vue()的时候,把提前实例化的router对象传进去就可以了,这就是常规的定义静态路由的方法。
但是很多情况,我们的路由都是需要根据权限动态生成的,所以需要动态添加路由。
也正是因为需要动态生成路由,所以我们才会碰到前面一系列懒加载组件导致的问题。因为静态路由的时候,引入组件基本都是固定路径,不涉及到传参数的问题。
所以,我们用前面懒加载组件,构造一个组件对应的路由信息,最终把构造好的路由,动态添加到vue router中。
但是这里也需要注意几点:
1:addRouter方法添加的router就像是Vuex里的缓存一样,并不是添加过了就会一直都在,只要页面刷新了, 添加的router就没了,需要重新添加,这个很好理解,因为静态路由也是这样,每次刷新了页面,静态路由也需要重新构造。
所以,我们一般会在路由钩子里动态添加路由,保证刷新之后的路由会重新添加。
具体做法当然是在router.beforeEach中,执行router.addRouer()。
不过一般需要做个判断,不是每次访问新的路由都需要重新添加路由,否则会重复添加路由,也会出问题。
2:addRouter方法执行之后,router.options.routes是找不到你动态添加的路由的,如果需要更新,必须手动将动态添加的路由push进去。此时,router.options.routes才可以用来构建菜单导航。
关于vue 动态引入(异步加载import和require)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度相关推荐
- vuejs 无node单页应用方案二(babel-standalone or traceur,vue-router实现、组件按需懒加载)
系列文章目录 1.vuejs 无node单页应用方案一(vue标签component ,is实现) 2.vuejs 无node单页应用方案二(babel-standalone or traceur,v ...
- JPA/hibernate懒加载原理分析及JSON格式API反序列化时连环触发懒加载问题的解决
什么是懒加载 JPA是java持久层的API,也就是java官方提供的一个ORM框架,Spring data jpa是spring基于hibernate开发的一个JPA框架.Spring data j ...
- vue编译速度过慢?大型vue 项目使用dll插件优化编译速度,效果显著
为什么要优化编译速度 vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命 如何 ...
- vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用 一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接 二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
- 小程序入坑记:懒加载
小程序可以说是非常火热了,开发周期短,页面简洁,数据控制方便,可以说结合了三大框架的特点 小程序的目录结构: 页面以index为例 utils:工具类目录,供全局调用.在utils中封装一个tools ...
- 小程序swiper怎么让内容撑开高度_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
- vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
- SpringBoot预加载与懒加载
预加载 bean在springBoot启动过程中就完成创建加载 在AbstractApplicationContext的refresh方法中 // Instantiate all remaining ...
- 懒加载 字典转模型 自定义cell
1 懒加载: 1> 什么是懒加载? 懒加载又称为延时加载,即在系统调用的时候加载,如果系统不调用则不会加载.所谓的懒加载其实就是重写其 get 方法. 2> 特点:在使用懒加载的时候要 ...
最新文章
- Xilinx SelectIO 接口
- 深入理解计算机系统9个重点笔记
- Spring boot的Thymeleaf默认规则
- 新建django项目
- 对现有的所能找到的DDOS代码(攻击模块)做出一次分析----GET篇
- jzoj1295-设计【差分约束系统,最短路】
- 数组追加数组,小程序数组里面追加数组如何操作?
- adb remount overlayfs的说明
- OpenCV-数字图像处理之拉普拉斯算子
- upupw启动mysql失败,Can't init tc log
- Linux文件系统:编写一个内核文件系统
- php key sort,PHP中的sort(), rsort(),asort(),arsort(),ksort(),krsort()函数
- 如何 shuffle 一个 vector 以及 vectorvector
- pc端ui图片尺寸_PC网页设计尺寸规范
- C++后台开发学习路线
- Springboot实现多数据源整合的两种方式
- 读just spring(一)(翻译的不好,都是用自己的话)
- raft协议--面试问答题
- 重启docker卡死问题解决systemctl start docker卡住不动
- 需要系数 计算机房,计算电流及需要系数表.xls