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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
React组件中的this的具体使用
Feb 28 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JS实现扫码枪扫描二维码功能
Jan 03 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
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python时间整形转标准格式的示例分享
2014/02/14 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
倡议书格式范文
2014/04/14 职场文书
社团活动总结怎么写
2014/06/30 职场文书
车辆转让协议书
2014/09/24 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
公司文体活动总结
2015/05/07 职场文书
简历自我评价范文
2019/04/24 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Go归并排序算法的实现方法
2022/04/06 Golang