webpack動(dòng)態(tài)加載與打包方式

更新時(shí)間：2023年02月09日 10:29:37 作者：s-alone

webpack有兩種組織模塊依賴的方式，同步和異步，這篇文章主要介紹了webpack動(dòng)態(tài)加載與打包方式，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

webpack代碼拆分

webpack有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊，在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

上下文模塊(contextModule)

上下文模塊有6種類型，分別為sync/lazy/lazy-once/eager/weak/sync-weak

sync：直接打包當(dāng)前文件，同步加載并執(zhí)行
lazy：為每個(gè)import()導(dǎo)入的模塊生成一個(gè)可延遲加載(lazy-loadable)的chunk
lazy-once：生成一個(gè)可滿足所有import()調(diào)用的可延遲加載(lazy-loadable)的chunk
此chunk將在第一次import()調(diào)用時(shí)獲取，隨后import()則使用相同的網(wǎng)絡(luò)響應(yīng)。注意，這種模式僅在動(dòng)態(tài)語句中有意義。例如：import(./locales/${language}.json),其中可能含有多個(gè)被請(qǐng)求的模塊路徑。
eager：不會(huì)分離出單獨(dú)的chunk文件，但是會(huì)返回promise，只有調(diào)用promise才會(huì)執(zhí)行代碼，可以理解為先加載了代碼，但是我們可以控制延遲執(zhí)行這部分代碼。
此模塊會(huì)阻止webpack生成額外的chunk。所有導(dǎo)入的模塊被包含在當(dāng)前chunk，所以不需要再發(fā)額外的網(wǎng)絡(luò)請(qǐng)求。它仍然返回一個(gè)promise，但會(huì)被自動(dòng)resolved。使用eager模式的動(dòng)態(tài)導(dǎo)入與靜態(tài)導(dǎo)入的區(qū)別在于整個(gè)模塊只有當(dāng)import()調(diào)用之后才會(huì)執(zhí)行。

例子：當(dāng)前vue文件為Home.vue,同級(jí)菜單有一個(gè)文件夾pages，它里面有三個(gè)文件a.vue, b.vue, c.vue

// 把Home, a, b, c分別打包到不同的chunk中
import('./pages/' + pageId)

// 把Home打成一個(gè)chunk，a/b/c統(tǒng)一打包到一個(gè)chunk
import(/* webpackMode: "lazy-once" */ './pages/' + pageId)

// 把Home, a, b, c打包到一個(gè)chunk中，且a/b/c中的代碼只有在import之后執(zhí)行(不在chunk加載時(shí)執(zhí)行)
import(/* webpackMode: "eager" */ './pages/' + pageId)

注意：即使沒有引用pages里面的某個(gè)文件，也會(huì)對(duì)其進(jìn)行打包！

? 通過上下文組件請(qǐng)求的實(shí)際路徑是相對(duì)于指定目錄的相對(duì)路徑；在這里相對(duì)于‘/pages’上下文的路徑，即’./a.vue’, ‘./b.vue’, ‘./c.vue’

生成contextModule的方式

require(表達(dá)式)

? require(./locale/${language}.js) 會(huì)把匹配到的文件打包進(jìn)去

require.context()函數(shù)

require.context(
  (directory: String),
  (includeSubdirs: Boolean) /* 可選的，默認(rèn)值是 true */,
  (filter: RegExp) /* 可選的，默認(rèn)值是 /^.\/.*$/，所有文件 */,
  (mode: String)  /* 可選的， 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默認(rèn)值是 'sync' */

? 一個(gè) context module 會(huì)導(dǎo)出一個(gè)（require）函數(shù)，此函數(shù)可以接收一個(gè)參數(shù)：request。

? 此導(dǎo)出函數(shù)有三個(gè)屬性：resolve, keys, id。

resolve 是一個(gè)函數(shù)，它返回 request 被解析后得到的模塊 id。
keys 也是一個(gè)函數(shù)，它返回一個(gè)數(shù)組，由所有可能被此 context module 處理的請(qǐng)求組成
id 是 context module 的模塊 id. 它可能在你使用 module.hot.accept 時(shí)會(huì)用到

例子：

? 與當(dāng)前文件index.js同級(jí)目錄modules有 aaa/index.js和bbb/index.js兩個(gè)文件

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'，默認(rèn)值是 'lazy' */
/* webpackPrefetch: true */
/* webpackPreload: true */
/* webpackIgnore: false */ /* 將 webpackIgnore 設(shè)置為 true 則不進(jìn)行代碼分割 */
`./locale/${language}`
)

require.ensure()函數(shù)

require.ensure()已被import()代替

含有環(huán)境變量的動(dòng)態(tài)加載

代碼運(yùn)行時(shí)通過判斷環(huán)境變量(例如process.env.NODE_ENV===‘production’)，只會(huì)打包滿足判斷條件邏輯分支的請(qǐng)求?。。?；

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’，只會(huì)打包 ‘@/prod.host.js’

否則會(huì)打包 ‘@/api’下的直屬下屬文件中滿足 /devHost.js$/ 正則的文件，以及 ‘@/dev.host.js’

到此這篇關(guān)于webpack動(dòng)態(tài)加載與打包方式的文章就介紹到這了,更多相關(guān)webpack動(dòng)態(tài)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: