虽然把我们用到的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. SerializeHelper

    using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...

  2. Linux使用NFS服务实现远程共享

    首先安装 apt install -y nfs-kernel-server nfs-common 编辑配置文件 vim /etc/exports 添加内容: /root/test *(rw,sync, ...

  3. urllib模块学习

    一.urllib库 概念:urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urll ...

  4. npm指南

    什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ruby , pear 之于 PHP . npm 是 Node 官方提供的包管理工具,他已经成了 Node ...

  5. tp3.2 支付宝手机网站支付

    手机网站支付接口,支付宝官方文档:https://b.alipay.com/signing/productSet.htm?navKey=all 第一步: 1)登陆支付宝企业账号 进入支付宝官网 ,登陆 ...

  6. C# 如何提取字符串中的数字(小技巧)

    下面讲解如何在字符串当中抓取到数字 方法一.使用正则表达式 1.纯数字提取 1 string str = "提取123abc提取"; //我们抓取当前字符当中的123 2 stri ...

  7. windows 下安装 docker

    1. 使用阿里云的镜像进行安装: http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 2. 安装完成后点击图标 “Dock ...

  8. Celery 在Windows下启动worker时出现错误：ValueError: not enough values to unpack (expected 3, got 0)

    在公司Linux环境下没有出现问题,在回到家后直接在Windows10下运行出现错误: ValueError: not enough values to unpack (expected 3, got ...

  9. 图算法之——dijkstra算法

    一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...

  10. 【Jmeter自学】Jmeter性能测试（四）

    ==================================================================================================== ...