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