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 相关文章推荐
js有关元素内容操作小结
Dec 20 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
JavaScript对象学习小结
Sep 02 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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作为Shell脚本语言使用
2006/10/09 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php实现encode64编码类实例
2015/03/24 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python装饰器decorator介绍
2014/11/21 Python
深入解析Python中的上下文管理器
2016/06/28 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python让列表倒序输出的实例
2018/06/25 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
np.dot()函数的用法详解
2020/01/17 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
nohup的用法
2012/11/26 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
学生档案自我鉴定
2013/10/07 职场文书
会议开场欢迎词
2014/01/15 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
信息总监管理职责范本
2014/03/08 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js