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.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
js常用正则表达式集锦
May 17 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php中yii框架实例用法
2020/12/22 PHP
Ext 今日学习总结
2010/09/19 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
JS实现li标签的删除
2019/04/12 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python数值基础知识浅析
2019/11/19 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
django正续或者倒序查库实例
2020/05/19 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
小学生秋游活动方案
2014/02/23 职场文书
期中考试反思800字
2014/05/01 职场文书
大学生创业计划书
2014/08/14 职场文书
庆六一宣传标语
2014/10/08 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL