webpack-ng-dll-plugin

• ng版本可用的dll插件,路子比較野
  

用途

• 提高打包速度
• 代碼復(fù)用(微前端依賴共享)
  

使用

• 首先根據(jù)個(gè)人熟悉程度選擇@angular-devkit/build-webpack,@angular-builders/custom-webpack,ngx-build-plus
  

第一個(gè)是官方的,后兩個(gè)是第三方的,但是確認(rèn)你有練過(guò)之前,請(qǐng)不要選擇官方的...

作者在測(cè)試的時(shí)候選擇的是@angular-builders/custom-webpack

• 先構(gòu)建dll,建議使用空項(xiàng)目來(lái)創(chuàng)建dll,因?yàn)槟壳伴_(kāi)發(fā)中并沒(méi)考慮到一些復(fù)雜邏輯的實(shí)現(xiàn)及相關(guān)第三方包的依賴關(guān)系保存(full模式應(yīng)該可以實(shí)現(xiàn),理論)
• 然后在構(gòu)建時(shí)引用
  

引用就是webpack的正常引用插件就ok了

嘗鮮

下面的函數(shù)過(guò)濾了index.html,styles,polyfills,License的輸出,并且禁用了runtimeChunk

 setNgDllPlugin(
 config,
 {
  //webpack 的out相關(guān)配置
  output: {
  filename: 'dll.js',
  },
  ngDllPluginOptions: {
   // dll的資源清單導(dǎo)出配置
  path: path.join(__dirname, 'dist', 'manifest.json'),
  name: 'TLIB',
  format: true,
  filter: {
   // 過(guò)濾模式,full全量,auto相對(duì)于項(xiàng)目,manual 手動(dòng)指定過(guò)濾項(xiàng)(需要設(shè)置map)
   mode: 'auto',
  },
  },
 },
 options
 );

自定義

相關(guān)配置需要參考(暫時(shí)沒(méi)寫(xiě)文檔,需要查看源碼)

 config.plugins.push(new NgDllPlugin(option.ngDllPluginOptions));

引用

// 這里的context可以理解為代碼(應(yīng)用代碼)相對(duì)于哪個(gè)文件夾解析(不是打包出來(lái)的dll.js,如果正確引用,你會(huì)發(fā)現(xiàn)把dll.js刪掉,也不會(huì)影響打包),如果發(fā)現(xiàn)打包出來(lái)的東西沒(méi)有使用這個(gè),應(yīng)該就是這個(gè)配置錯(cuò)了
 config.plugins.push(
 new webpack.DllReferencePlugin({
  context: path.resolve(__dirname),
  manifest: require('./dist/manifest.json'),
 })
 );

演示地址

https://github.com/wszgrcy/ng-cli-plugin-demo

可能解鎖的技術(shù)

• 分體式路由加載
  

正常情況下,哪怕是動(dòng)態(tài)加載的路由,也是與項(xiàng)目一同打包,只不過(guò)是打包為兩個(gè)文件

主體項(xiàng)目先打包,然后再單獨(dú)開(kāi)發(fā)懶加載路由模塊

• web-component的使用率上升
  

雖然ng已經(jīng)實(shí)現(xiàn)了這個(gè),但是由于每次一大包,就相當(dāng)于打了一個(gè)單獨(dú)項(xiàng)目,非常龐大,使用dll后則會(huì)縮小到一個(gè)可怕的程度,副作用接近0

目前(可能)存在的問(wèn)題

• 資源清單輸出的是全量的引用,但是實(shí)際上,只有mode:'full'時(shí),才等價(jià)
  

沒(méi)修改之一主要是影響不大,加上調(diào)試需要

• 如果生成dll的項(xiàng)目中有動(dòng)態(tài)加載模塊,可能有未知影響
  

dll在設(shè)計(jì)的時(shí)候根本沒(méi)考慮過(guò)動(dòng)態(tài)模塊之類(lèi)的東西,完全就是只打一個(gè)大包

盡量使用空項(xiàng)目生成dll

• auto只代表當(dāng)前生成項(xiàng)目可以達(dá)到完全引用,如果你修改了項(xiàng)目,那么必須重新構(gòu)建項(xiàng)目(額.看起來(lái)比較廢物的一個(gè)模式)
  

其實(shí)如果項(xiàng)目代碼足夠多(各種種類(lèi)),修改代碼是不影響的,但是比如有些引入第一次使用,或者h(yuǎn)tml模板中使用了一些新的東西,都需要重新構(gòu)建

待改進(jìn)

主動(dòng)排除一部分永遠(yuǎn)無(wú)法使用的導(dǎo)出

為什么dll比直接打包大

• 即使dll打包現(xiàn)在使用到了ng的aot,搖樹(shù)等相關(guān)優(yōu)化技術(shù),但是仍然有個(gè)致命問(wèn)題,就是導(dǎo)出名,默認(rèn)打包時(shí),所有名字都會(huì)被優(yōu)化(混淆),而dll打包就必須暴露這個(gè)名字,當(dāng)完全暴露時(shí),就會(huì)出現(xiàn)體積增長(zhǎng)
  

目前用空項(xiàng)目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是說(shuō)當(dāng)其他包使用時(shí)這些文件都會(huì)在dll中查找),選擇性導(dǎo)出最小化啟動(dòng)在216k作用,最終估計(jì)應(yīng)該平均在300k左右

• 目前使用的技術(shù),只能1.全量導(dǎo)出,2.選擇可用導(dǎo)出,這其實(shí)就有一個(gè)副作用存在,全量導(dǎo)出時(shí).不僅一些不使用的依賴被導(dǎo)出了,還有些內(nèi)部引用的(比如ɵangular_packages_core_core_h)也被強(qiáng)制導(dǎo)出了,從而增加了包大小

后期,其實(shí)可以整理一個(gè)永不導(dǎo)出的列表,進(jìn)行排除,從而減小體積

• 傳統(tǒng)打包是多個(gè)模塊打包一個(gè)模塊,中間很多依賴都是屬于內(nèi)部依賴,所以精簡(jiǎn)了很多代碼,dll的這種打包屬于多模塊,因此每個(gè)模塊都有出口,之間的引用也是用的模塊之間的引用,所以即使最小化dll也會(huì)比打包的多40k左右

總結(jié)

到此這篇關(guān)于angular共享依賴解決方案的文章就介紹到這了,更多相關(guān)angular共享依賴解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！