虽然把我们用到的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. zabbix_server.conf配置文件详解

    在TTLSA学习zabbix的同学们,来看看zabbix server配置文件参数详细讲解吧.有助于你更了解zabbix.直接往下看. AlertScriptsPath 默认值:/usr/local/ ...

  2. RedHat使用Centos的yum仓库

    RedHat使用Centos的yum仓库 卸载红帽yum源 [root@zhouwanchun ~]# rpm -qa | grep yum [root@zhouwanchun ~]# rpm -e ...

  3. java下载excel,excel从数据库获取数据

    <!-- poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId&g ...

  4. MySQL查询表的所有列名，用逗号拼接

    问题场景 在MySQL中,需要以逗号拼接一个表的所有字段 sql语句 SELECT GROUP_CONCAT(COLUMN_NAME SEPARATOR ",") FROM inf ...

  5. 【LeetCode】3. 无重复字符的最长子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...

  6. fatal error C1083: Cannot open include file: 'openssl/opensslv.h'

    在安装针对ELK系统的警告工具elastalert时,报错: fatal error C1083: Cannot open include file: 'openssl/opensslv.h',如下图 ...

  7. Nginx80端口转发+域名——实现IP+端口隐藏

    一.目的1.相信大家会遇到这样的问题:当一台服务器部署多个tomcat应用时,当我们访问tomcat时,需要在浏览器中输入服务器IP+端口号,这看起来非常的low. 二. 环境 1台服务服务器 假如I ...

  8. C# .NET 配置404,500等错误信息

    <customErrors mode="On" defaultRedirect="viewAll.html"><!--所有的错误显示页--&g ...

  9. BZOJ2134 luoguP1297 [国家集训队]单选错位

    单选错位 [问题描述] gx和lc去参加noip初赛,其中有一种题型叫单项选择题,顾名思义,只有一个选项是正确答案.试卷上共有n道单选题,第i道单选题有ai个选项,这ai个选项编号是1,2,3,…,a ...

  10. 背景图片的移动----background-attach-----background-repeat

    background-repeat:默认是平铺的,也即是还有空间的话将一张接着一张显示 设置为 no-repeat  就最多显示一张 background-attachment:设置是否固定图片,在有 ...