快捷導(dǎo)航

angular共享依賴的解決方案分享

更新時(shí)間：2020年10月15日 09:11:56 作者：wszgrcy

這篇文章主要給大家介紹了關(guān)于angular共享依賴解決方案的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

webpack-ng-dll-plugin

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

用途

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

使用

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

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

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

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

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

嘗鮮

下面的函數(shù)過濾了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: {
   // 過濾模式,full全量,auto相對(duì)于項(xiàng)目,manual 手動(dòng)指定過濾項(xiàng)(需要設(shè)置map)
   mode: 'auto',
  },
  },
 },
 options
 );

自定義

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

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

引用

// 這里的context可以理解為代碼(應(yīng)用代碼)相對(duì)于哪個(gè)文件夾解析(不是打包出來的dll.js,如果正確引用,你會(huì)發(fā)現(xiàn)把dll.js刪掉,也不會(huì)影響打包),如果發(fā)現(xiàn)打包出來的東西沒有使用這個(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)目一同打包,只不過是打包為兩個(gè)文件

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

web-component的使用率上升

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

目前(可能)存在的問題

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

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

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

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

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

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

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

待改進(jìn)

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

為什么dll比直接打包大

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

目前用空項(xiàng)目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是說當(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)行排除,從而減小體積