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

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

先看我们的页面：

<!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("

{{bbb}}


")

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异步加载业务模块的更多相关文章

  1. Vue(基础七）_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. require.ensure的用法;异步加载-代码分割;

    webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

  4. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. Android开发--异步加载

    因为移动端软件开发思维模式或者说是开发的架构其实是不分平台和编程语言的,就拿安卓和IOS来说,他们都是移动前端app开发展示数据和用户交互数据的数据终端,移动架构的几个大模块:UI界面展示.本地数据可 ...

  7. 【JAVAWEB学习笔记】网上商城实战2：异步加载分类、Redis缓存分类和显示商品

    网上商城实战2 今日任务 完成分类模块的功能 完成商品模块的功能 1.1      分类模块的功能: 1.1.1    查询分类的功能: 1.1.2    查询分类的代码实现: 1.1.2.1  创建 ...

  8. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  9. Webpack的加载器

    一.什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用load ...

随机推荐

  1. IFE2017笔记

    1. jQuery.trim()方法 jQuery 杂项方法 实例 删除字符串开始和末尾的空格 2.jQuery的map方法可以批量操作数组中元素,可以替代传统在循环中处理完数据挨个push进数据的代 ...

  2. css一般性

    1. 总差那么几像素!line-height:100%;2. 数据图片,产品图片用img 小图标,logo,修饰网站的图片 用背景3.文字居中 line-height /text-align:cent ...

  3. 基于HAProxy+Keepalived高可用负载均衡web服务的搭建

    一 原理简介 1.HAProxyHAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web ...

  4. DELPHI中自定义消息的发送和接收

    DELPHI中的消息处理机制 Delphi是Borland公司提供的一种全新的WINDOWS编程开发工具.由于它采用了具有弹性的和可重用的面向对象Pascal(object-orientedpasca ...

  5. java synchronized 同步详解

    记下来,很重要. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchron ...

  6. C语言：冒泡排序

    void sort(int arr[],int len) { ; ; i<len; i++) { printf("第%d轮:\n", i); // len-i+1:新轮比上轮 ...

  7. BZOJ3812主旋律

    /* 这道题其实没有看懂 所以整理一下吧 首先思想转化成所有方案减去不强联通的方案 不强联通的方案相当于很多强联通分量缩点后的dag 转化成子问题, 问很多点的dag方案数 然后枚举作为出度为0的点集 ...

  8. hive类型转化错误，会错误提示指定分区参数

    select * from TRAD_LIST t WHERE t.dt >= '2017-10-18' and t.dt <= '2017-11-01' and t.con_level ...

  9. 在mvc中动态加载菜单

    最近做了一个项目, 要在客户端动态的显示菜单,也就是这些菜单是保存在数据库中的, 在客户端动态加载菜单,这样做的好处很明显,就是菜单很容易修改,直接在后台进行维护,再也不会直接在前面的 视图页面中进行 ...

  10. vmware centos7 动态ip->静态

    TYPE=Ethernet BOOTPROTO=none DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_ ...