webpack-ng-dll-plugin

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

用途

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

使用

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

第一個是官方的,后兩個是第三方的,但是確認你有練過之前,請不要選擇官方的...

作者在測試的時候選擇的是@angular-builders/custom-webpack

• 先構建dll,建議使用空項目來創(chuàng)建dll,因為目前開發(fā)中并沒考慮到一些復雜邏輯的實現(xiàn)及相關第三方包的依賴關系保存(full模式應該可以實現(xiàn),理論)
• 然后在構建時引用
  

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

嘗鮮

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

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

自定義

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

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

引用

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

演示地址

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

可能解鎖的技術

• 分體式路由加載
  

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

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

• web-component的使用率上升
  

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

目前(可能)存在的問題

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

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

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

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

盡量使用空項目生成dll

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

其實如果項目代碼足夠多(各種種類),修改代碼是不影響的,但是比如有些引入第一次使用,或者html模板中使用了一些新的東西,都需要重新構建

待改進

主動排除一部分永遠無法使用的導出

為什么dll比直接打包大

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

目前用空項目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是說當其他包使用時這些文件都會在dll中查找),選擇性導出最小化啟動在216k作用,最終估計應該平均在300k左右

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

后期,其實可以整理一個永不導出的列表,進行排除,從而減小體積

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

總結

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

最新評論