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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
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类分享
2014/02/07 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
IE6 hack for js 集锦
2014/09/23 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python正则实现计算器功能
2017/12/14 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python性能测试工具locust的使用
2020/12/28 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
高中军训感言1000字
2014/03/01 职场文书
股权转让协议书
2014/04/12 职场文书
我的梦想演讲稿
2014/04/30 职场文书
运动会班级口号
2014/06/09 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
理想国读书笔记
2015/06/25 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS