比较易懂, 方法简单

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. [Deep Learning]任意层cnn的matlab版本实现

    之前实现了一层的卷积神经网络,又实现了两层的卷积神经网络,接下来把cnn扩展到任意层就不难了. 这难道就是传说中的“道生一,一生二,二生三,三生万物”么?=.= 代码还是在github上. 比较有趣的 ...

  2. 编码解码--url编码解码

    url编码解码,又叫百分号编码,是统一资源定位(URL)编码方式.URL地址(常说网址)规定了常用地数字,字母可以直接使用,另外一批作为特殊用户字符也可以直接用(/,:@等),剩下的其它所有字符必须通 ...

  3. 关于C++中的string的小知识点

    这是GCC版本5.x的情况下的分析,在GCC版本4.x的情况下std::string的内存布局将不同.逆向C++的过程中经常遇到std::string,它在内存中的状态是什么样呢?我先简单地写了一个程 ...

  4. python使用百度api翻译中英文

    python使用百度api翻译中英文 写程序取变量名的时候,常常需要翻译单词,或者将中文翻译成英语.有道词典,必应词典都很好,可是...命令行习惯了还是觉得用在cmd里面调出程序使用起来也许会更爽.于 ...

  5. 爬虫之动态HTML处理(Selenium与PhantomJS )动态页面模拟点击

    动态页面模拟点击 #!/usr/bin/env python # -*- coding:utf-8 -*- # python的测试模块 import unittest from selenium im ...

  6. ng2 quickstart

    1.下载 git clone https://github.com/angular/quickstart.git quickstart-angular 2.安装模块 npm install 3.启动 ...

  7. 使用淘宝的npm代理下载模块

    npm install node-sass --registry=http://registry.npm.taobao.org

  8. 分词工具比较及使用(ansj、hanlp、jieba)

    一.分词工具 ansj.hanlp.jieba 二.优缺点 1.ansj 优点: 提供多种分词方式 可直接根据内部词库分出人名.机构等信息 可构造多个词库,在分词时可动态选择所要使用的词库缺点: 自定 ...

  9. RocketMQ 自己的整理和理解

    每个人的想法不同, RocketMQ 介绍的时候就说 是阿里从他们使用的上 解耦出来 近一步简化 便捷的 目的当然是 让其能快速入手和开发 如果不是在项目设计层面上 只是使用的话 从Git上下载该项目 ...

  10. Mysql uploader File

    前几天和哥们做一次渗透测试,内网情况.防护相当严格. 内网不允许访问DMZ,DMZ不允许访问内网,除了服务端口,比如80,3306. 经过长时间的分析,就发现本机连接了内网的一个MYQL,发现WEB开 ...