webpack学习笔记之代码分割和按需加载的实例详解


Posted in Javascript onJuly 20, 2017

本文介绍了webpack学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记

为什么需要代码分割和按需加载

代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。

举个简单的例子:

1.一个HTML中存在一个按钮

2.点击按钮出现一个包着图片的div

3.点击关闭按钮图片消失

Demo目录:

webpack学习笔记之代码分割和按需加载的实例详解

一.当未点击按钮时浏览器只加载了对入口文件打包后的js

webpack学习笔记之代码分割和按需加载的实例详解

二.点击按钮会对组件进行异步加载

webpack学习笔记之代码分割和按需加载的实例详解

这个clichunk就是我们打包好的click组件,包括相应的JS逻辑html和css

例子源码记录

1.编辑入口文件

window.onload=function(){
     var _cs=require('./index.css');
     var $=require('jquery');

     $('#_click').on('click',function(){
       require.ensure([],function(require){
         var _click=require('./_clickWindow.js');
         if(!_clickEvent){
           console.log(_click);
           var _clickEvent=_click._clicks;
         }
         new _clickEvent();
       },'cli')
     });
};

webpack将一切视为模块,CSS,js,html,JSX等等。

var _cs=require('./index.css');

引入对应的css模块。这就需要我们安装css-loder和style-loader。

webpack学习笔记之代码分割和按需加载的实例详解 

?save -dev的目的是为了在package.json文件的devDependencies写入依赖项。

点击按钮时,加载定义好的组件,当加载完成后执行组件里的方法。

首先要学习require.ensure方法:

在commonjs中有一个Modules/Async/A规范,里面定义了require.ensure语法。webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。用法如下:

require.ensure([], function(require){
  var list = require('./list');
  list.show();
});

中括号内写入依赖项

此时list.js会被打包成一个单独的chunk文件,大概长这样:

1.fb874860b35831bc96a8.js。

可读性比较差,此时就需要加入第三个参数

require.ensure([], function(require){
  var list = require('./list');
  list.show();
}, 'list');

此时打包后的js文件名为

list.fb874860b35831bc96a8.js

也可以传入像”question/list”这样带层级的名字,这样webpack会按照层级给你创建文件夹。

require.ensure([], function(require){
  var list = require('./list');
  list.show();
  var edit = require('./edit');
  edit.display();
}, 'list_and_edit');

同时引入两个文件,webpack会将这两个文件和写入的依赖项打包在一起,如果你不希望打包在一起,只能写两require.ensure分别引用这两个文件。

require.ensure([‘./a.js'], function(require){
  var list = require('./list');
  list.show();
});

require.ensure([‘./a.js'], function(require){
  var b = require('./b');
  b.show();
});

如果list和b同时以来a.js那么在打包时a.js会被重复打包两次,如果想解决这样的问题,那么

require.ensure([‘./a.js'], function(require){
  var list = require('./list');
  list.show();
},'list-b');

require.ensure([‘./a.js'], function(require){
  var b = require('./b');
  b.show();
},'list-b');

此时这三个文件就会被打包在一起。

2.组件js

(function(){
  var _html=require('./_clickHtml.html');
  var $=require('jquery');

  function ClickWindow(){
   this.div=$('body').append(_html);
   $('#_tip').append('<img src="./timg.jpg">');
   this.init();
  }
  ClickWindow.prototype.init=function(){
   $('#_tip').append('<button>关闭</button>')
     .on('click',function(){
       $('img').animate({'width':0},300);
     });
  };

  module.exports._clicks=ClickWindow;
})();

引入写好的html同上需要下载html-loader

3.配置文件

var path=require('path');
module.exports={
 entry:__dirname+'/index.js',
 output:{
   path: __dirname,
   filename:'[name]bundle.js',
   chunkFilename:'[name]chunk.js'
 },
  module: {
      loaders: [  //加载器
       {test: /\.css$/, loader: "style!css" },
       {test: /\.html$/, loader: "html" },
       {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
      ]
  }
};

filename:'[name]bundle.js',

[name]指向入口文件的name

chunkFilename:'[name]chunk.js'

[name]指向require.ensure定义的第三个参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 #Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
深入探究node之Transform
Jul 20 #Javascript
微信小程序“摇一摇”的实例代码
Jul 20 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php生成图片验证码的方法
2016/04/15 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
javascript document.images实例
2008/05/27 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python正则分组的应用
2013/11/10 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python文件路径操作方法总结
2020/12/21 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Java中实现多态的机制
2015/08/09 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
优秀企业获奖感言
2014/02/01 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python