详解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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
让table变成exls的示例代码
Mar 24 Javascript
js获取checkbox值的方法
Jan 28 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP安全防范技巧分享
2011/11/03 PHP
解析php中的escape函数
2013/06/29 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
IBatis持久层技术
2016/07/18 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
文员求职信
2014/07/15 职场文书
2014年统计工作总结
2014/11/21 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
婚庆答谢词大全
2015/09/29 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python