成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack import() 動(dòng)態(tài)加載模塊踩坑

GeekGhc / 1047人閱讀

摘要：根據(jù)規(guī)范實(shí)現(xiàn)了用于動(dòng)態(tài)加載的方法。在瀏覽器運(yùn)行到這一行代碼時(shí)，就會(huì)自動(dòng)請(qǐng)求這個(gè)資源，實(shí)現(xiàn)異步加載。為減少主包大小，我們希望動(dòng)態(tài)加載這些頁(yè)面。所以的正確姿勢(shì)，應(yīng)該是盡可能靜態(tài)化表達(dá)包所處的路徑，最小化變量控制的區(qū)域。

import

webpack根據(jù)ES2015 loader 規(guī)范實(shí)現(xiàn)了用于動(dòng)態(tài)加載的import()方法。

這個(gè)功能可以實(shí)現(xiàn)按需加載我們的代碼，并且使用了promise式的回調(diào)，獲取加載的包。

在代碼中所有被import()的模塊，都將打成一個(gè)多帶帶的包，放在chunk存儲(chǔ)的目錄下。在瀏覽器運(yùn)行到這一行代碼時(shí)，就會(huì)自動(dòng)請(qǐng)求這個(gè)資源，實(shí)現(xiàn)異步加載。

這里是一個(gè)簡(jiǎn)單的demo。

import("lodash").then(_ => {
    // Do something with lodash (a.k.a "_")...
  })

可以看到，import()的語(yǔ)法十分簡(jiǎn)單。該函數(shù)只接受一個(gè)參數(shù)，就是引用包的地址，這個(gè)地址與es6的import以及CommonJS的require語(yǔ)法用到的地址完全一致。可以實(shí)現(xiàn)無(wú)縫切換【寫(xiě)個(gè)正則替換美滋滋】。

并且使用了Promise的封裝，開(kāi)發(fā)起來(lái)感覺(jué)十分自在?！景b一個(gè)async函數(shù)就更爽了】

然而，以上只是表象。

只是表象。

我在開(kāi)發(fā)的時(shí)候就遇到了問(wèn)題。場(chǎng)景是這樣的：一個(gè)對(duì)象，存儲(chǔ)的是各級(jí)的路由信息，及其對(duì)應(yīng)的頁(yè)面組件。為減少主包大小，我們希望動(dòng)態(tài)加載這些頁(yè)面。

同時(shí)使用了react-loadable來(lái)簡(jiǎn)化組件的懶加載封裝。代碼如下所示。

function lazyLoad(path) {
  return Loadable({
    loader: () => import(path),
    loading: Spin,
  });
}

然后我就開(kāi)始開(kāi)心的在代碼中寫(xiě)上lazyLoad("./pages/xxx")。果不其然，掛了。瀏覽器表示，沒(méi)有魚(yú)丸沒(méi)有粗面，也不知道這個(gè)傻逼模塊在哪里。

于是我查看了官方文檔，發(fā)現(xiàn)有一個(gè)黃條提示。

emmm，看來(lái)問(wèn)題出在這里了。

這個(gè)現(xiàn)象其實(shí)是與webpack import()的實(shí)現(xiàn)高度相關(guān)的。由于webpack需要將所有import()的模塊都進(jìn)行多帶帶打包，所以在工程打包階段，webpack會(huì)進(jìn)行依賴收集。

此時(shí)，webpack會(huì)找到所有import()的調(diào)用，將傳入的參數(shù)處理成一個(gè)正則，如：

import("./app"+path+"/util") => /^./app.*/util$/

也就是說(shuō)，import參數(shù)中的所有變量，都會(huì)被替換為【.*】，而webpack就根據(jù)這個(gè)正則，查找所有符合條件的包，將其作為package進(jìn)行打包。

因此，如果我們直接傳入一個(gè)變量，webpack就會(huì)把 (整個(gè)電腦的包都打包進(jìn)來(lái)[不鬧]) 認(rèn)為你在逗他，并且拋出一個(gè)WARNING: Critical dependency: the request of a dependency is an expression。

所以import的正確姿勢(shì)，應(yīng)該是盡可能靜態(tài)化表達(dá)包所處的路徑，最小化變量控制的區(qū)域。

如我們要引用一堆頁(yè)面組件，可以使用import("./pages/"+ComponentName)，這樣就可以實(shí)現(xiàn)引用的封裝，同時(shí)也避免打包多余的內(nèi)容。

另外一個(gè)影響功能封裝的點(diǎn)，是import()中的相對(duì)路徑，是import語(yǔ)句所在文件的相對(duì)路徑，所以進(jìn)一步封裝import時(shí)會(huì)出現(xiàn)一些麻煩。

因?yàn)閕mport語(yǔ)句中的路徑會(huì)在編譯后被處理成webpack命令執(zhí)行目錄的相對(duì)路徑.

友情鏈接：

https://webpack.js.org/api/mo...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96166.html

相關(guān)文章

  • 百度地圖 osm地圖 leaflet echarts webapck的組合使用時(shí)的踩坑記錄

    摘要：百度地圖創(chuàng)建標(biāo)簽進(jìn)行加載使用百度地圖需要百度地圖添加擴(kuò)展，用于讓百度地圖支持地圖可能會(huì)遇見(jiàn)兩個(gè)問(wèn)題地圖圖片錯(cuò)位忘記加載中使用的一個(gè)主要問(wèn)題是默認(rèn)圖標(biāo)的加載問(wèn)題，詳見(jiàn)另外也可以考慮使用動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法，類似百度地圖加載百度地圖因?yàn)楸旧碇С值? webpack+百度地圖 創(chuàng)建 script標(biāo)簽進(jìn)行加載 export function MP(ak){ return new Prom...

    G9YH 評(píng)論0 收藏0

  • Vue + TypeScript + Element 項(xiàng)目實(shí)踐(簡(jiǎn)潔時(shí)尚博客網(wǎng)站)及踩坑記

    摘要：前言本文講解如何在項(xiàng)目中使用來(lái)搭建并開(kāi)發(fā)項(xiàng)目，并在此過(guò)程中踩過(guò)的坑。具有類型系統(tǒng)，且是的超集，在年勢(shì)頭迅猛，可謂遍地開(kāi)花。年將會(huì)更加普及，能夠熟練掌握，并使用開(kāi)發(fā)過(guò)項(xiàng)目，將更加成為前端開(kāi)發(fā)者的優(yōu)勢(shì)。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...

    luckyyulin 評(píng)論0 收藏0

  • React 歷史項(xiàng)目維護(hù)與優(yōu)化實(shí)踐

    摘要：本文介紹了作者接手維護(hù)一個(gè)中型歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分業(yè)務(wù)邏輯梳理打包優(yōu)化等。代碼中如菜單名稱結(jié)構(gòu)表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開(kāi)發(fā)者的打包體驗(yàn)方面，本次優(yōu)化中主要實(shí)現(xiàn)的是與的解耦。 本文介紹了作者接手維護(hù)一個(gè)中型 React 歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分、業(yè)務(wù)邏輯梳理、Webpack 打包優(yōu)化等。 背景 這是一個(gè) PC 的...

    toddmark 評(píng)論0 收藏0

  • webpack入門(mén)及踩坑應(yīng)對(duì)指南

    摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點(diǎn)自動(dòng)化，模塊化性能優(yōu)化自動(dòng)化就是命令行操作，一行命令實(shí)現(xiàn)多個(gè)功能，例如自動(dòng)監(jiān)聽(tīng)變化，自動(dòng)翻譯源代碼到打包代碼庫(kù)里面文件復(fù)雜多樣文件多變化快將各種文件集 webpack的使用 為什么使用webpack 1.前端需要工程化 工程化的概念： 小作坊 -> 流水線流水線的特點(diǎn)：自動(dòng)化，模塊化、性能優(yōu)化 自動(dòng)化就是命令行操作，一行...

    ky0ncheng 評(píng)論0 收藏0

  • webpack啟動(dòng)代碼源碼解讀

    摘要：它是如何用原生實(shí)現(xiàn)模塊間的依賴管理的呢對(duì)于按需加載的模塊，它是通過(guò)什么方式動(dòng)態(tài)獲取的打包完成后那一堆開(kāi)頭的代碼是用來(lái)干什么的本文將圍繞以上個(gè)問(wèn)題，對(duì)照著源碼給出解答。 歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 雖然每天都在用webpack，但一直覺(jué)得隔著一層神秘的面紗，對(duì)它的工...

    zengdongbao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<