webpack多頁面開發(fā)與懶加載hash解決方案
之前討論了webpack的hash與chunkhash的區(qū)別以及各自的應(yīng)用場景,如果是常規(guī)單頁面應(yīng)用的話,上篇文章提供的方案是沒有問題的。但是前端項目復(fù)雜多變,應(yīng)對復(fù)雜多頁面項目時,我們不得不繼續(xù)踩webpack的hash坑。
在進(jìn)入正文之前先解釋一下所謂的常規(guī)單頁面和復(fù)雜多頁面是什么意思。
這兩個并非專業(yè)術(shù)語,而是筆者實在想不出更恰當(dāng)?shù)恼f法了,見諒。
1. 項目類型
1.1 常規(guī)單頁面項目
常規(guī)單頁面符合以下條件:
- 可以存在多個主js文件和css文件;
- 每個js文件都是同步打包的,也就是說不存在與主文件相關(guān)聯(lián)的懶加載文件。
與主文件關(guān)聯(lián)的懶加載文件指的是邏輯與主文件完全無關(guān)的js文件,這類文件不參與主文件打包。比如主文件main.js中有以下代碼:
window.onload = function(){ var script = document.createElement('script');
script.src = '//static.daojia.com/bi.js'; document.head.appendChild(script);
}
其中bi.js的內(nèi)部邏輯與main.js為任何關(guān)聯(lián),它對于main.js來說就是一個字符串而已。
與之相對應(yīng)的是與主文件有邏輯關(guān)系的模塊文件,比如以下代碼:
window.onload = function(){ require.ensure([],function
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞
2017-07-26
- 從棧不平衡問題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式