比较易懂, 方法简单

var util_sync = require('./util-sync.js')

alert(util_sync.data)

document.getElementById("aBtn").onclick = function() {

  require.ensure([], function() {
var awork = require('./workA-async.js')
alert(awork.data)
//异步里面再导入同步模块--实际是使用同步中的模块
var util1 = require('./util-sync.js')
})
} document.getElementById("bBtn").onclick = function() { require.ensure([], function() {
var bwork = require('./workB-async.js')
alert(bwork.data)
})
}

 

使用了reauire.ensure后, webpack会把里面引入的js单独打包. 

webpack 事件触发 按需加载的更多相关文章

  1. webpack学习笔记--按需加载

    为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...

  2. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  3. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. webpack require.ensure 按需加载

    使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js.当使用存在多个路由代码的时候,index.js可能会超大,影响加载速度. 这个每个路由页面除了i ...

  6. webpack 配置echarts 按需加载

    引入babel-plugin-equire插件,方便使用.yarn add babel-plugin-equire -D 在.babelrc文件中的配置 { "presets": ...

  7. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  8. react-route4 按需加载配置心得

    本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得,可能只有笔者一个人看,权当日记了.   很久很久以前,react-route还是2.X和3.X版本的时 ...

  9. 【webpack整理】一、安装、配置、按需加载

    如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...

随机推荐

  1. 【c++ primer, 5e】定义类相关的非成员函数

    练习 7.6 & 7.7 #include <iostream> #include <string> using namespace std; // Sales_dat ...

  2. docker使用Mesos

    https://github.com/PyreneGitHub/mesos_use/tree/master

  3. 20135320赵瀚青LINUX内核分析第三周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 本周是学习的主要是构造 ...

  4. javaScript对象与JSON.stringfly(obj)

    //接收json对象 var objJson = new Object(); var arr = new Array(); var obj1 = new Object(); obj1.age = 15 ...

  5. MongoDB 性能优化

    Read Preferences/读写分离 有时候为了考虑应用程序的性能或响应性,为了提高读取操作的吞吐率,一个常见的措施就是进行读写分离,MongoDB副本集对读写分离的支持是通过Read Pref ...

  6. jQuery全局冲突案例,解决$.noConflict()

    如图:犹豫$在js中可以作为一个变量去定义,所以在引入jQuery包之前定义了$对象,那么,在引入jQuery包之后就不能使用$对象了 解决:使用$.noConflict()她可以返回一个对象,这个对 ...

  7. Tomcat 环境搭建

    最近在工作之余,看到了一些 Tomcat 的基础资料,感觉蛮好.同时也回忆起自己刚毕业要参加工作那会对 Tomcat 也是各种资料各种查,实属不易.为此,针对最近整理的一些基础,把 Tomcat 基本 ...

  8. Swift 4.1 正式发布,新增更多泛型特性支持

    Swift 4.1 兼容 4.0,并做了一些改进,其中大部分通过了 Swift Evolution 流程.此次发布,包含了对核心语言的更新,包括新增更多对泛型的支持.新的构建选项,以及对 Swift ...

  9. Android6.0------权限申请~easypermissions

    前面写了Android6.0权限介绍和权限单个,多个申请,用的是纯Java代码,本文主要说的是借助第三方库来实现权限申请. 借助第三方库 easypermissions来申请6.0权限,Google官 ...

  10. 15个Android通用流行框架大全

    1. 缓存 DiskLruCache  Java实现基于LRU的磁盘缓存 2.图片加载 Android Universal Image Loader  一个强大的加载,缓存,展示图片的库 Picass ...