详解webpack异步加载业务模块
时间:2019-03-30
本文章向大家介绍详解webpack异步加载业务模块,主要包括详解webpack异步加载业务模块使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
虽然把我们用到的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("<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命令就能看到效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Mysql读写分离方案-MySQL Proxy环境部署记录
- Mysql读写分离方案-Amoeba环境部署记录
- linux系统终端命令提示符设置(PS1)记录
- 从MapX到MapXtreme2004[10]-根据zoom值修改显示范围
- Linq to Sql中Single写法不当可能引起的数据库查询性能低下
- 获得定长字符串
- vue2.0知识点汇总
- ie6,ie7,ff 的css兼容hack写法
- 使用子查询时应当注意的
- LegacyText的复制的Bug
- 提高WCF服务并发能力的简单处理办法
- 如何给已经有数据的DataTable动态增加一列并赋值
- Gitlab上采用rpm方式快速安装的操作记录
- WCF与IIS集成Windows身份验证的矛盾
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在网页中常用到的几种居中方法
- 秋招面经三(作业帮、新浪、阿里云)
- 初识HTML
- iOS 点击按钮复制文本
- AntUI滑块Sliders
- AntUI卡片Cards
- AntUI常规Forms表单
- 二叉树:看看这些树的最大深度
- C++核心准则SF.5: .cpp文件必须包含定义它接口的.h文件
- C++核心准则SF.6:(只)为转换,基础库或在局部作用域内部使用using namspace指令
- C++核心准则SF.7:不要在头文件中的全局作用域中使用using namespace指令
- 二叉树:看看这些树的最小深度
- Hive初体验
- Hive数据的存储以及在centos7下进行Mysql的安装
- 一个改进的数学学习工具