資訊專欄INFORMATION COLUMN
摘要：前端的代碼分片，或者說是按需加載，本質(zhì)上是由于前端頁面越來越復(fù)雜，代碼體積越來越大，程序員需要對頁面資源的加載做細粒度的控制。這里需要說一下的是的第三參數(shù)，是這個分片的。
前端的代碼分片，或者說是按需加載，本質(zhì)上是由于前端頁面越來越復(fù)雜，代碼體積越來越大，程序員需要對頁面資源的加載做細粒度的控制。按需加載當(dāng)然是好東西，但是會讓頁面邏輯變得更加復(fù)雜。好在webpack出現(xiàn)，讓按需加載變得簡單多了。
我們來做一個簡單的demo，完整代碼
demo的功能很簡單，單擊一個按鈕，然后去加載一個js文件并執(zhí)行。
index.html文件:
index.js文件
document.getElementById("btn").addEventListener("click",function(){
require.ensure([],()=>{
let hello = require("./Hello").default;
hello();
},"Hello")
})
Hello.js文件
export default function hello(){
alert("hello.")
}
在 click 的事件處理函數(shù)中,通過 require.ensure標(biāo)記分割點，然后加載Hello.js并賦值給變量hello，最后調(diào)用該方法。這里需要說一下的是require.ensure的第三參數(shù)，是這個分片chunk的name。如果不加這個參數(shù)，默認會以chunkid來命名該文件。這個參數(shù)在開發(fā)環(huán)境還是很有用的，畢竟1.js的文件名，讓人很難定位文件。
由于 ES2015 Loader spec 定義了 import() 方法來在運行時動態(tài)的加載javascript文件，所以webpack也把import()作為split code的分割點。
如果想用酷炫的import()語法，還需要安裝一個插件:
npm i babel-plugin-syntax-dynamic-import --save-dev。然后，就可以把上面的 index.js文件改成：
document.getElementById("btn").addEventListener("click",function(){
import("./Hello").then((Hello) => {
let hello = Hello.default;
hello();
}).catch(err => console.log("Failed to load moment", err))
})
import()支持promise語法，所以可以用catch來處理加載文件引起的異常。但是，它也有它的弱點，import()無法給這個文件命名（類似于require.ensure的第三個參數(shù)），這樣打包出來的文件都是用數(shù)字來標(biāo)示的，非常難以區(qū)分，在開發(fā)環(huán)境下，會使定位錯誤變的更加困難。
此外，這兩種語法在引用文件時，文件路徑都不可以是表達式。例如：
require.ensure([],()=>{
let path = "./Hello";
let hello = require(path).default;
hello();
},"Hello")
這樣會報錯，無法正常加載文件。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82334.html
摘要：百度地圖創(chuàng)建標(biāo)簽進行加載使用百度地圖需要百度地圖添加擴展，用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標(biāo)的加載問題，詳見另外也可以考慮使用動態(tài)創(chuàng)建標(biāo)簽的方法，類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖 創(chuàng)建 script標(biāo)簽進行加載 export function MP(ak){ return new Prom...
webpack4 提倡， 一旦用了這個， 不能使用style-loader 以及css module 安裝 npm install --save-dev mini-css-extract-plugin rules rules: [ { test: /.css$/, use: [ { loader: MiniCssExtractPlug...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...
摘要：有時候覺得一個工具的學(xué)習(xí)成本還是很大的，所以唯一的感覺就是隨隨便便放棄一個工具是多么的難。指定執(zhí)行的方法命令。這時候我們再看一下目錄會多出來一個目錄說明你的處女終于破了。 嘮嘮嗑 ?前幾天在學(xué)習(xí)webpack時,踩過很多坑，也聽過webapck是多么的嗶嗶嗶嗶~~， 本人學(xué)習(xí)的工具有很多,比如sass的初級工具compass,自動化工具gulp,grunt,一起其他雜七雜八的工具。有時...
閱讀 966·2023-04-26 02:49
閱讀 1178·2021-11-25 09:43
閱讀 2549·2021-11-18 10:02
閱讀 2923·2021-10-18 13:32
閱讀 1286·2019-08-30 13:54
閱讀 2081·2019-08-30 12:58
閱讀 3015·2019-08-29 14:06
閱讀 2155·2019-08-28 18:10
