详解webpack异步加载业务模块


Posted in Javascript onJune 23, 2017

虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵。而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外。这就涉及到异步加载了。异步加载是SPA的重要构建方式之一。

我们沿着上一篇的目录,这次学习webpack的require.ensure API。此文件也叫做ensure.html,涉及到avalon, jquery,还有两个业务代码ensure.js与ensure_a.js.

详解webpack异步加载业务模块

先看我们的页面:

<!DOCTYPE html>

<html>

  <head>

    <title>require.ensure</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width">

    <script src="dist/common.js"></script>

    <script src="dist/ensure.js"></script>

 

  </head>

  <body ms-controller="test">

    <p><button type="button" ms-click="click">{{aaa}}</button></p>

    <div id="add"></div>

  </body>

</html>

我们的目的是在点击按钮后,再动态生成一个HTML区域,里面使用avalon进行渲染。

//ensure.js

var avalon = require("avalon")

 

avalon.define({

  $id: "test",

  aaa: "测试require.ensure效果",

  click: function () {

    avalon.log("进入点击事件回调")

    if (!avalon.vmodels.bbb) {

      require.ensure(["jquery"], function () {//这里是异步的

        console.log("进入require.ensure回调")

        require("./ensure_a.js")

        console.log("调用完require.ensure")

      })

    }

  }

})

它需要动态加载另一个业务代码,并且必须待到jquery加载回来才执行。

var avalon = require("avalon")

var $ = require("jquery")

 

avalon.log("这是异步加载的脚本")

$("#add").html("<div ms-controller="bbb">{{bbb}}</div>")

var vm = avalon.define({

  $id: "bbb",

  bbb: "这是新加的内容"

})

avalon.scan($("#add")[0], vm)

最后我们看重头戏的webpack.config.js, 为了抽象异步的部分为一个独立的文件,我们需要为它指定名字,这使用output.chunkFilename配置项实现,还需要指定路径,这使用output.publicPath配置项实现。

var webpack = require("webpack"); 

var path = require("path");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

  entry: {

    index: './dev/index', //我们开发时的入口文件

    router: './dev/router',

    router2: './dev/router2',

    ensure: './dev/ensure'

  },

  output: {

    path: path.join(__dirname, "dist"), 

    filename: "[name].js",

    publicPath:"dist/", //给require.ensure用

    chunkFilename: "[name].chunk.js"//给require.ensure用

  }, //页面引用的文件

   

  module: {

    loaders: [

      {test: /\.css$/, loader: 'style-loader!css-loader'}

    ],

    preLoaders: [

      {test: /\.js$/, loader: "amdcss-loader"}

    ]

  },

  plugins: [commonsPlugin],

  resolve: {

    extensions: ['.js', "", ".css"],

    alias: {

      jquery: path.join(__dirname, 'dev/jquery/jquery.js'),

      avalon: path.join(__dirname, 'dev/avalon/avalon.shim'), //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')

      '../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的,需要在这里进行别名

    }

  }

}

然后执行webpack命令就能看到效果:

详解webpack异步加载业务模块

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
javascript折半查找详解
Jan 26 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
javascript每日必学之运算符
Feb 16 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
js实现简单抽奖功能
Nov 24 Javascript
详解微信第三方小程序代开发
Jun 23 #Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 #Javascript
详解用vue.js和laravel实现微信支付
Jun 23 #Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 #Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 #Javascript
VUE中v-model和v-for指令详解
Jun 23 #Javascript
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
You might like
php创建多级目录代码
2008/06/05 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python利用微信公众号实现报警功能
2018/06/10 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
建筑工程自我鉴定
2013/10/18 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
销售人员自我评价
2014/02/01 职场文书
护士自我评价
2014/02/01 职场文书
职业女性的职业规划
2014/03/04 职场文书
就业协议书怎么填
2014/04/11 职场文书
小学生期末评语大全
2014/04/21 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
高效课堂教学反思
2016/02/24 职场文书