虽然把我们用到的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. npm 淘宝镜像

    npm config set registry https://registry.npm.taobao.org

  2. 删除win7任务栏通知区域图标的方法

    大家都知道程序运行后会在任务栏的通知区域显示表明正在运行,但是有很多失效的图标也会在此显示,那么怎么样删除那些没用的图标呢? 1.在开始运行里输入:regedit进入注册表编辑器 2.进入注册表编辑器 ...

  3. unity3d 通过代码建立曲面

    using UnityEngine;using System;using System.Collections.Generic; using System.Collections;using Syst ...

  4. 第6章 静态路由和动态路由（4）_OSPF动态路由协议

    6. OSPF动态路由协议 6.1 OSPF协议(Open Shortest Path First,OSPF开放式最短路径优先协议) (1)通过路由器之间通告链路的状态来建立链路状态数据库,网络中所有 ...

  5. 请求（Request）的参数（Param）里包含特殊字符（#等）的正确处理方式

    当调用restful接口,并且url中有参数传过去时,比如http://test.com?param=woshi#miaoyinga. 后台在使用@RequestParam("param&q ...

  6. Java远程通讯技术及原理分析

    在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI.MINA.ESB.Burlap.Hessian.SOAP.EJB和JMS等,这些 ...

  7. retry之python重试机制

    安装 pip install retry Retry装饰器 retry(exceptions=Exception, tries=-1, delay=0, max_delay=None, backoff ...

  8. 在Java中多段执行adb或者shell的命令

    public void Bale (String logname){ //ant打包 System.out.println("-----------正在执行ant编译-----------& ...

  9. ORA-01940:无法删除当前已链接的用户(转)

    (1)查看用户的连接状况 select username,sid,serial# from v$session ------------------------------------------ 如 ...

  10. python变量存储和深浅拷贝

    python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不 ...