比较易懂, 方法简单

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. 20145301 实验三 "敏捷开发与XP实践"

    20145301 实验三 "敏捷开发与XP实践" 课程:Java程序设计  班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.22 实验名称:敏捷开发与XP实践 一.实验 ...

  2. 20145324 《Java程序设计》第4周学习总结

    20145324 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 1.继承是为避免多个类间重复定义共同行为 A extends B A继承B的行为 2.一个子类只能继承一个父 ...

  3. tomcat配置根目录访问后,部署后第一次访问会出现tomcat的默认界面而非项目首页

    tomcat配置根目录访问后,部署后第一次访问会出现tomcat的默认界面而非项目首页,而重启后会正常,这个原因是因为在配置文件中有如下配置,造成项目加载两次 <Host name=" ...

  4. Student : IComparable<Student> 以及逆变和协变

    IComparable<Student>是Student的父类,所以IComparable<Student>可以接收Student.但是在使用CompareTo方法的时候,必须 ...

  5. mac iterm2 打开Linux 服务器文件乱码

    我的mac 上用是iterm2终端, Shell 环境是zsh.ssh 到Linux 服务器上查看一些文件时,中文乱码. 这种情况一般是终端和服务器的字符集不匹配,MacOSX下默认的是utf8字符集 ...

  6. GridControl 史上最全的资料(二)

    GridControl详解(四)分组排序汇总 分组: 按时间分第一组: 按性别分第二组: 显示结果: 高级设置: 将所有组展开代码:gridView1.ExpandAllGroups(); 显示结果: ...

  7. 机器学习经典书籍&论文

    原文地址:http://blog.sina.com.cn/s/blog_7e5f32ff0102vlgj.html 入门书单 1.<数学之美>PDF6 作者吴军大家都很熟悉.以极为通俗的语 ...

  8. UML类图概述、设计模式

    深入浅出UML类图(http://blog.csdn.net/lovelion/article/details/7843308) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相 ...

  9. 获得Python脚本所在目录

    如何获得Python脚本所在目录的位置   On this page... (hide) 1.  以前的方法 2.  正确的方法 3.  实例说明   (Edit) 1.  以前的方法 如果是要获得程 ...

  10. rdlc报表出现多余空白页面

    1.RDLC报表设计好后,在ReportViewer预览报表时,页数都正常:但在切换为整页模式时,常造成多了不少空白页出来.第一时间觉得不可思议,在ReportViewer看来正常,怎可能在整页预览时 ...