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代码
Jan 01 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
详解小程序横屏方案对比
Jun 28 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php文件下载处理方法分析
2015/04/22 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Selenium定位元素操作示例
2018/08/10 Python
python实现排序算法解析
2018/09/08 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
七夕情人节促销方案
2014/06/07 职场文书
工程承包协议书范本
2014/09/29 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
技术入股协议书
2016/03/22 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
MySQL分布式恢复进阶
2022/07/23 MySQL