詳解webpack異步加載業(yè)務(wù)模塊
雖然把我們用到的JS文件全部打包一個(gè)可以節(jié)省請(qǐng)求數(shù),但如果打包后的JS文件過大,那么也容易出現(xiàn)白屏現(xiàn)象,許多操作失靈。而且一些區(qū)域是點(diǎn)到才出現(xiàn),那么相關(guān)的JS其實(shí)可以剝離出這個(gè)大JS文件外。這就涉及到異步加載了。異步加載是SPA的重要構(gòu)建方式之一。
我們沿著上一篇的目錄,這次學(xué)習(xí)webpack的require.ensure API。此文件也叫做ensure.html,涉及到avalon, jquery,還有兩個(gè)業(yè)務(wù)代碼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>
我們的目的是在點(diǎn)擊按鈕后,再動(dòng)態(tài)生成一個(gè)HTML區(qū)域,里面使用avalon進(jìn)行渲染。
//ensure.js var avalon = require("avalon") avalon.define({ $id: "test", aaa: "測試require.ensure效果", click: function () { avalon.log("進(jìn)入點(diǎn)擊事件回調(diào)") if (!avalon.vmodels.bbb) { require.ensure(["jquery"], function () {//這里是異步的 console.log("進(jìn)入require.ensure回調(diào)") require("./ensure_a.js") console.log("調(diào)用完require.ensure") }) } } })
它需要?jiǎng)討B(tài)加載另一個(gè)業(yè)務(wù)代碼,并且必須待到j(luò)query加載回來才執(zhí)行。
var avalon = require("avalon") var $ = require("jquery") avalon.log("這是異步加載的腳本") $("#add").html("<div ms-controller="bbb">{{bbb}}</div>") var vm = avalon.define({ $id: "bbb", bbb: "這是新加的內(nèi)容" }) avalon.scan($("#add")[0], vm)
最后我們看重頭戲的webpack.config.js, 為了抽象異步的部分為一個(gè)獨(dú)立的文件,我們需要為它指定名字,這使用output.chunkFilename配置項(xiàng)實(shí)現(xiàn),還需要指定路徑,這使用output.publicPath配置項(xiàng)實(shí)現(xiàn)。
var webpack = require("webpack"); var path = require("path"); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { entry: { index: './dev/index', //我們開發(fā)時(shí)的入口文件 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"http://給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風(fēng)格引用avalon,以require('avalon') '../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon來引用avalon的,需要在這里進(jìn)行別名 } } }
然后執(zhí)行webpack命令就能看到效果:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變 推薦
以前做谷歌的小工具時(shí),api里提供了一個(gè)很有用的函數(shù),那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化,而且是平滑變換,在一些jquery的lightbox里也普遍有這種效果,看起來很酷的樣子。2009-12-12使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄,需要的朋友可以參考下2013-10-10JavaScript鏈?zhǔn)秸{(diào)用實(shí)例淺析
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式分析了javascript鏈?zhǔn)秸{(diào)用的相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12JS記錄用戶登錄次數(shù)實(shí)現(xiàn)代碼
當(dāng)?shù)卿洿螖?shù)達(dá)到三次,就自動(dòng)調(diào)用函數(shù),隱藏彈出框。下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼
統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼...2007-03-03javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫保存例子)
本文,我將以一個(gè)類似的例子來做一個(gè)前臺(tái)用Javascript動(dòng)態(tài)添加數(shù)據(jù)項(xiàng),后臺(tái)保存到數(shù)據(jù)庫的例子。2010-05-05