webpack動態(tài)加載與打包方式
webpack代碼拆分
webpack有兩種組織模塊依賴的方式,同步和異步。異步依賴作為分割點,形成一個新的塊,在優(yōu)化了依賴樹后,每一個異步區(qū)塊都作為一個文件被打包。
上下文模塊(contextModule)
上下文模塊有6種類型,分別為sync/lazy/lazy-once/eager/weak/sync-weak
- sync:直接打包當前文件,同步加載并執(zhí)行
- lazy:為每個import()導入的模塊生成一個可延遲加載(lazy-loadable)的chunk
- lazy-once:生成一個可滿足所有import()調(diào)用的可延遲加載(lazy-loadable)的chunk
- 此chunk將在第一次import()調(diào)用時獲取,隨后import()則使用相同的網(wǎng)絡響應。注意,這種模式僅在動態(tài)語句中有意義。例如:import(
./locales/${language}.json
),其中可能含有多個被請求的模塊路徑。 - eager:不會分離出單獨的chunk文件,但是會返回promise,只有調(diào)用promise才會執(zhí)行代碼,可以理解為先加載了代碼,但是我們可以控制延遲執(zhí)行這部分代碼。
- 此模塊會阻止webpack生成額外的chunk。所有導入的模塊被包含在當前chunk,所以不需要再發(fā)額外的網(wǎng)絡請求。它仍然返回一個promise,但會被自動resolved。使用eager模式的動態(tài)導入與靜態(tài)導入的區(qū)別在于整個模塊只有當import()調(diào)用之后才會執(zhí)行。
例子:當前vue文件為Home.vue,同級菜單有一個文件夾pages,它里面有三個文件a.vue, b.vue, c.vue
// 把Home, a, b, c分別打包到不同的chunk中 import('./pages/' + pageId) // 把Home打成一個chunk,a/b/c統(tǒng)一打包到一個chunk import(/* webpackMode: "lazy-once" */ './pages/' + pageId) // 把Home, a, b, c打包到一個chunk中,且a/b/c中的代碼只有在import之后執(zhí)行(不在chunk加載時執(zhí)行) import(/* webpackMode: "eager" */ './pages/' + pageId)
注意:即使沒有引用pages里面的某個文件,也會對其進行打包!
? 通過上下文組件請求的實際路徑是相對于指定目錄的相對路徑;在這里相對于‘/pages’上下文的路徑,即’./a.vue’, ‘./b.vue’, ‘./c.vue’
生成contextModule的方式
require(表達式)
? require(./locale/${language}.js
) 會把匹配到的文件打包進去
require.context()函數(shù)
require.context( (directory: String), (includeSubdirs: Boolean) /* 可選的,默認值是 true */, (filter: RegExp) /* 可選的,默認值是 /^.\/.*$/,所有文件 */, (mode: String) /* 可選的, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once',默認值是 'sync' */
? 一個 context module 會導出一個(require)函數(shù),此函數(shù)可以接收一個參數(shù):request。
? 此導出函數(shù)有三個屬性:resolve, keys, id。
- resolve 是一個函數(shù),它返回 request 被解析后得到的模塊 id。
- keys 也是一個函數(shù),它返回一個數(shù)組,由所有可能被此 context module 處理的請求組成
- id 是 context module 的模塊 id. 它可能在你使用 module.hot.accept 時會用到
例子:
? 與當前文件index.js同級目錄modules有 aaa/index.js和bbb/index.js兩個文件
const modulesFiles = require.context('./modules', true, /index.js$/) console.log('modulesFiles:', modulesFiles) // ? webpackContext(req) { // var id = webpackContextResolve(req); // return __webpack_require__(id); // } console.log('modulesFiles.keys:', modulesFiles.keys()) // ['./aaa/index.js', './bbb/index.js'] console.log('modulesFiles.resove:', modulesFiles.resolve('./bbb/index.js')) // ./src/store/modules/bbb/index.js console.log('modulesFiles.id:', modulesFiles.id) // ./src/store/modules sync recursive index.js$ export const modules = modulesFiles.keys().reduce((res, modulePath) => { const pathName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') const moduleName = pathName.replace('/index', '') const module = modulesFiles(modulePath) const dModuleName = module.default.name || '' console.log('modulePath:', modulePath) console.log('moduleName:', moduleName) console.log('module:', module) res[dModuleName || moduleName] = module.default console.log('res:', res) return res }, {})
import()函數(shù)
import( /* webpackInclude: /\.json$/ */ /* webpackExclude: /\.noimport\.json$/ */ /* webpackChunkName: "my-chunk-name" */ /* webpackMode: "lazy" */ /* 'eager' | 'weak' | 'lazy' | 'lazy-once',默認值是 'lazy' */ /* webpackPrefetch: true */ /* webpackPreload: true */ /* webpackIgnore: false */ /* 將 webpackIgnore 設(shè)置為 true 則不進行代碼分割 */ `./locale/${language}` )
require.ensure()函數(shù)
require.ensure()已被import()代替
含有環(huán)境變量的動態(tài)加載
代碼運行時通過判斷環(huán)境變量(例如process.env.NODE_ENV===‘production’),只會打包滿足判斷條件邏輯分支的請求?。。?;
export function getBaseUrl () { if (process.env.NODE_ENV === 'production') { require('@/prod.host.js') return '/performance/' } else { const requireHostFiles = require.context('@/api', false, /devHost.js$/) return requireHostFiles.keys().includes('./devHost.js') ? requireHostFiles('./devHost.js').devHost : require('@/dev.host.js').devHost } }
如果process.env.NODE_ENV === ‘production’,只會打包 ‘@/prod.host.js’
否則會打包 ‘@/api’下的直屬下屬文件中滿足 /devHost.js$/ 正則的文件, 以及 ‘@/dev.host.js’
到此這篇關(guān)于webpack動態(tài)加載與打包方式的文章就介紹到這了,更多相關(guān)webpack動態(tài)加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用JavaScript來美化HTML的select標簽的下拉列表效果
這篇文章主要介紹了用JavaScript來美化HTML的select標簽的下拉列表效果的方法,而且在多瀏覽器下的兼容效果也得到提升,需要的朋友可以參考下2015-11-11JavaScript獲取XML數(shù)據(jù)附示例截圖
這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下2014-03-03uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下2022-12-12Bootstrap入門教程一Hello Bootstrap初識
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開發(fā)的。這篇文章主要介紹了基于Bootstrap3實現(xiàn)漂亮簡潔的CSS3價格表(精美代碼版),需要的朋友可以參考下2017-03-03javascript+xml技術(shù)實現(xiàn)分頁瀏覽
基于web的技術(shù)中,分頁是一個老的不能再老的,但大家津津樂道的問題,隨著xml技術(shù)的日漸應用,把xml應用到分頁當中,也是一種可能,當然網(wǎng)上的教程很多,當我都是看得稀里糊涂,索性自己寫一個,與大家分享、指正。2008-07-07