bootstraptable 加载完成回调函数_require.ensure实现webpack按需加载

本文介绍了如何使用webpack的require.ensure实现按需加载,特别是在bootstraptable加载完成后的回调函数应用。详细阐述了require.ensure的参数含义,并通过vue文件示例说明其在路由配置和chunkName设置中的使用。同时讨论了require.ensure与es6 import的关系,以及webpack如何根据不同的配置文件区分生产与开发环境的文件生成。
摘要由CSDN通过智能技术生成

webpack使用require.ensure将vue页面打包成独立的chunk文件,也可以将多个vue页面合并成一个chunk文件,以实现生产环境按需加载。

下面给出官网的require.ensure函数原型:

require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)

各个参数含义如下:

1、dependencies:依赖

这是一个字符串数组,通过这个参数,在所有的回调函数代码被执行前,我们可以将所有需要用到的模块进行声明。

2、callback:回调

当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。

3、errorCallback:错误回调

4、chunkName:chunk名称

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的文件束(bundle)。

概念说完了,接下以来以vue文件为例论证

在src/pages目录下新建confirm.vue和example.vue

然后在路由文件router/index.js中引入

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值