webpack import() 動態加載模塊踩坑

GeekGhc 發布于2019-08-22 18:45 / 1037人閱讀

摘要：根據規范實現了用于動態加載的方法。在瀏覽器運行到這一行代碼時，就會自動請求這個資源，實現異步加載。為減少主包大小，我們希望動態加載這些頁面。所以的正確姿勢，應該是盡可能靜態化表達包所處的路徑，最小化變量控制的區域。

import

webpack根據ES2015 loader 規范實現了用于動態加載的import()方法。

這個功能可以實現按需加載我們的代碼，并且使用了promise式的回調，獲取加載的包。

在代碼中所有被import()的模塊，都將打成一個多帶帶的包，放在chunk存儲的目錄下。在瀏覽器運行到這一行代碼時，就會自動請求這個資源，實現異步加載。

這里是一個簡單的demo。

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

可以看到，import()的語法十分簡單。該函數只接受一個參數，就是引用包的地址，這個地址與es6的import以及CommonJS的require語法用到的地址完全一致?？梢詫崿F無縫切換【寫個正則替換美滋滋】。

并且使用了Promise的封裝，開發起來感覺十分自在?！景b一個async函數就更爽了】

然而，以上只是表象。

只是表象。

我在開發的時候就遇到了問題。場景是這樣的：一個對象，存儲的是各級的路由信息，及其對應的頁面組件。為減少主包大小，我們希望動態加載這些頁面。

同時使用了react-loadable來簡化組件的懶加載封裝。代碼如下所示。

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

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

于是我查看了官方文檔，發現有一個黃條提示。

emmm，看來問題出在這里了。

這個現象其實是與webpack import()的實現高度相關的。由于webpack需要將所有import()的模塊都進行多帶帶打包，所以在工程打包階段，webpack會進行依賴收集。

此時，webpack會找到所有import()的調用，將傳入的參數處理成一個正則，如：

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

也就是說，import參數中的所有變量，都會被替換為【.*】，而webpack就根據這個正則，查找所有符合條件的包，將其作為package進行打包。

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

所以import的正確姿勢，應該是盡可能靜態化表達包所處的路徑，最小化變量控制的區域。

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

另外一個影響功能封裝的點，是import()中的相對路徑，是import語句所在文件的相對路徑，所以進一步封裝import時會出現一些麻煩。

因為import語句中的路徑會在編譯后被處理成webpack命令執行目錄的相對路徑.

友情鏈接：

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

云服務器 GPU云服務器 webpack按需加載未能加載模塊內核模塊加載 python加載模塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96166.html

百度地圖 osm地圖 leaflet echarts webapck的組合使用時的踩坑記錄

摘要：百度地圖創建標簽進行加載使用百度地圖需要百度地圖添加擴展，用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標的加載問題，詳見另外也可以考慮使用動態創建標簽的方法，類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖創建 script標簽進行加載 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 評論0 收藏0
Vue + TypeScript + Element 項目實踐(簡潔時尚博客網站)及踩坑記

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

luckyyulin 2019-08-26 13:39 評論0 收藏0
React 歷史項目維護與優化實踐

摘要：本文介紹了作者接手維護一個中型歷史項目時的一系列改進實踐，包括模塊結構拆分業務邏輯梳理打包優化等。代碼中如菜單名稱結構表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發者的打包體驗方面，本次優化中主要實現的是與的解耦。本文介紹了作者接手維護一個中型 React 歷史項目時的一系列改進實踐，包括模塊結構拆分、業務邏輯梳理、Webpack 打包優化等。背景這是一個 PC 的...

toddmark 2019-08-20 16:50 評論0 收藏0
webpack入門及踩坑應對指南

摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點自動化，模塊化性能優化自動化就是命令行操作，一行命令實現多個功能，例如自動監聽變化，自動翻譯源代碼到打包代碼庫里面文件復雜多樣文件多變化快將各種文件集 webpack的使用為什么使用webpack 1.前端需要工程化工程化的概念：小作坊 -> 流水線流水線的特點：自動化，模塊化、性能優化自動化就是命令行操作，一行...

ky0ncheng 2019-08-22 16:20 評論0 收藏0
webpack啟動代碼源碼解讀

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

zengdongbao 2019-08-23 12:08 評論0 收藏0