webpack-ng-dll-plugin
- ng版本可用的dll插件,路子比較野
用途
- 提高打包速度
- 代碼復用(微前端依賴共享)
使用
- 首先根據個人熟悉程度選擇@angular-devkit/build-webpack,@angular-builders/custom-webpack,ngx-build-plus
第一個是官方的,后兩個是第三方的,但是確認你有練過之前,請不要選擇官方的...
作者在測試的時候選擇的是@angular-builders/custom-webpack
- 先構建dll,建議使用空項目來創建dll,因為目前開發中并沒考慮到一些復雜邏輯的實現及相關第三方包的依賴關系保存(full模式應該可以實現,理論)
- 然后在構建時引用
引用就是webpack的正常引用插件就ok了
嘗鮮
下面的函數過濾了index.html,styles,polyfills,License的輸出,并且禁用了runtimeChunk
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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); |
自定義
相關配置需要參考(暫時沒寫文檔,需要查看源碼)
|
1
|
config.plugins.push(new NgDllPlugin(option.ngDllPluginOptions)); |
引用
|
1
2
3
4
5
6
7
|
// 這里的context可以理解為代碼(應用代碼)相對于哪個文件夾解析(不是打包出來的dll.js,如果正確引用,你會發現把dll.js刪掉,也不會影響打包),如果發現打包出來的東西沒有使用這個,應該就是這個配置錯了 config.plugins.push( new webpack.DllReferencePlugin({ context: path.resolve(__dirname), manifest: require('./dist/manifest.json'), }) ); |
演示地址
https://github.com/wszgrcy/ng-cli-plugin-demo
可能解鎖的技術
- 分體式路由加載
正常情況下,哪怕是動態加載的路由,也是與項目一同打包,只不過是打包為兩個文件
主體項目先打包,然后再單獨開發懶加載路由模塊
- web-component的使用率上升
雖然ng已經實現了這個,但是由于每次一大包,就相當于打了一個單獨項目,非常龐大,使用dll后則會縮小到一個可怕的程度,副作用接近0
目前(可能)存在的問題
- 資源清單輸出的是全量的引用,但是實際上,只有mode:'full'時,才等價
沒修改之一主要是影響不大,加上調試需要
- 如果生成dll的項目中有動態加載模塊,可能有未知影響
dll在設計的時候根本沒考慮過動態模塊之類的東西,完全就是只打一個大包
盡量使用空項目生成dll
- auto只代表當前生成項目可以達到完全引用,如果你修改了項目,那么必須重新構建項目(額.看起來比較廢物的一個模式)
其實如果項目代碼足夠多(各種種類),修改代碼是不影響的,但是比如有些引入第一次使用,或者html模板中使用了一些新的東西,都需要重新構建
待改進
主動排除一部分永遠無法使用的導出
為什么dll比直接打包大
- 即使dll打包現在使用到了ng的aot,搖樹等相關優化技術,但是仍然有個致命問題,就是導出名,默認打包時,所有名字都會被優化(混淆),而dll打包就必須暴露這個名字,當完全暴露時,就會出現體積增長
目前用空項目生成出的dll(包括rxjs,router,common,core),全量暴力是440k(也就是說當其他包使用時這些文件都會在dll中查找),選擇性導出最小化啟動在216k作用,最終估計應該平均在300k左右
- 目前使用的技術,只能1.全量導出,2.選擇可用導出,這其實就有一個副作用存在,全量導出時.不僅一些不使用的依賴被導出了,還有些內部引用的(比如?angular_packages_core_core_h)也被強制導出了,從而增加了包大小
后期,其實可以整理一個永不導出的列表,進行排除,從而減小體積
- 傳統打包是多個模塊打包一個模塊,中間很多依賴都是屬于內部依賴,所以精簡了很多代碼,dll的這種打包屬于多模塊,因此每個模塊都有出口,之間的引用也是用的模塊之間的引用,所以即使最小化dll也會比打包的多40k左右
總結
到此這篇關于angular共享依賴解決方案的文章就介紹到這了,更多相關angular共享依賴解決內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000031793067
