webpack學(xué)習(xí)第十三步——懶加載和預(yù)請求

同步引入

  • index.js
import _ from 'lodash'

document.addEventListener('click',() => {
    var element = document.createElement('div')
    element.innerHTML =_.join(['a','b','c'],'***')
    document.body.appendChild(element)
})
  • 打開頁面時就會引入lodash


異步引入可以懶加載

  • index.js
function getComponent() {
    return import(/* webpackChunkName:'lodash' */'lodash').then(({default: _}) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}

document.addEventListener('click',() => {
    getComponent().then(element => document.body.appendChild(element))
})
  • 點擊時才去請求異步引入的lodash抬闷,這就是懶加載
  • 優(yōu)化語法,使用異步函數(shù)
async function getComponent() {
    const {default: _} = await import(/* webpackChunkName:'lodash' */'lodash')
    var element = document.createElement('div')
    element.innerHTML =_.join(['a','b','c'],'***')
    return element
}

document.addEventListener('click',() => {
    getComponent().then(element => document.body.appendChild(element))
})

所以webpack的splitChunks默認(rèn)對異步import進(jìn)行代碼分割,是因為它默認(rèn)異步引入使用懶加載针饥,性能會優(yōu)化

打包分析

  • 修改打包命令生成文件便于分析
"scripts": {
// 打包的profile生成一個state.json文件
    "dev": "webpack --profile --json>states.json --config ./config/webpack.dev.js",
     ...
  }
  • 生成的state.json文件

文件拆分優(yōu)化代碼

  • 普通寫法
document.addEventListener('click',() =>{
    var element = document.createElement('div')
    element.innerHTML ='dingding'
    document.body.appendChild(element)
})
  • 將異步操作拆分

    • 新建handleClick.js文件
    function handleClick() {
        var element = document.createElement('div')
        element.innerHTML ='dingding'
        document.body.appendChild(element)
    }
    
    export default handleClick
    
    • 修改index.js
    document.addEventListener('click',() => {
        import('./handleClick.js').then(({default: func}) => {
            func()
        })
    })
    
    • 點擊時請求handleClick的內(nèi)容

Prefetch 預(yù)請求

  • 核心代碼加載完成后去加載
  • 修改index.js
import _ from 'lodash'
// 引入lodash并將splitChunks改為async。這樣main.js會更大察滑,效果更明顯
document.addEventListener('click',() => {
// 加上webpack預(yù)請求注解
    import(/* webpackPrefetch: true */'./handleClick.js').then(({default: func}) => {
        func()
    })
})
  • 加載完main.js不需要點擊打厘,會自動加載handleClick
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末修肠,一起剝皮案震驚了整個濱河市贺辰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嵌施,老刑警劉巖饲化,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吗伤,居然都是意外死亡吃靠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門足淆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巢块,“玉大人,你說我怎么就攤上這事巧号∽迳荩” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵丹鸿,是天一觀的道長越走。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么廊敌? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任铜跑,我火速辦了婚禮,結(jié)果婚禮上骡澈,老公的妹妹穿的比我還像新娘锅纺。我一直安慰自己,他們只是感情好肋殴,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布伞广。 她就那樣靜靜地躺著,像睡著了一般疼电。 火紅的嫁衣襯著肌膚如雪嚼锄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天蔽豺,我揣著相機(jī)與錄音区丑,去河邊找鬼。 笑死修陡,一個胖子當(dāng)著我的面吹牛沧侥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播魄鸦,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼宴杀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拾因?” 一聲冷哼從身側(cè)響起旺罢,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绢记,沒想到半個月后扁达,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡蠢熄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年跪解,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片签孔。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡叉讥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出饥追,到底是詐尸還是另有隱情图仓,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布判耕,位于F島的核電站透绩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜帚豪,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一碳竟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧狸臣,春花似錦莹桅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煤禽,卻和暖如春铐达,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背檬果。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工瓮孙, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人选脊。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓杭抠,卻偏偏與公主長得像,于是被迫代替她去往敵國和親恳啥。 傳聞我的和親對象是個殘疾皇子偏灿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容