ionic4 + angularJs 打包使用 Gzipper 压缩 注意不要压缩图片

因为项目使用的框架是angularJs +ionic4 自带的混淆命令为 ng build --prod

温馨提示：注意不能压缩图片容易适得其反,体积越压缩越大

其中图片和css样式没有压缩 ，所以添加 gzipper 进行压缩：

首先需要安装gzipper

npm i gzipper

如果angular.json中的configurations配置好了如下

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        }

其中aot 与 buildOptimizer为true。即可使用压缩命令

npm run  && ng build --prod --build-optimizer && gzipper  c --exclude jpeg,png,ico  ./dist

因为ionic是www文件夹所以 需要改动文件夹名字

npm run  && ng build --prod --build-optimizer && gzipper  c --exclude jpeg,png,ico ./www

成果：没有压缩之前main.js文件4.7兆大小使用了gzipper之后文件变成2.4兆。体积缩小了一半。

执行结果如下

ng build --prod --build-optimizer && gzipper compress ./www
 10% building 4/7 modules 3 active ...mobile\src\ng-zorro-antd-mobile.min.cssBrowserslist: caniuse-lite is outdated. Please run next command `npm update`

Date: 2020-10-23T02:38:40.397Z
Hash: a1dd7e440e813ee8f765
Time: 427033ms
chunk {0} common.8741d7232a7edc4cbfb3.js (common) 23.3 kB  [rendered]
chunk {1} 1.f667c033ad803e3aab18.js () 19.6 kB  [rendered]
chunk {2} 2.ac05e94c0aa27a1bacf5.js () 2.97 MB  [rendered]
chunk {3} runtime.d7eed74872a7b222c819.js (runtime) 4.72 kB [entry] [rendered]
chunk {4} 4.7dfc8ff857efc014c05d.js () 606 bytes  [rendered]
chunk {5} 5.854fe2b47643a05d90a4.js () 848 bytes  [rendered]
chunk {6} 6.38021816cba07b54af0a.js () 863 bytes  [rendered]
chunk {7} 7.b678f79ae15f642e8c5b.js () 12.1 kB  [rendered]
chunk {8} 8.e08ad3735d8b528f0f89.js () 3.75 kB  [rendered]
chunk {9} 9.ac7eeda275a78d65dc65.js () 466 bytes  [rendered]
chunk {10} 10.8a98147b85ad40e0742f.js () 91.1 kB  [rendered]
chunk {11} 11.701b91f1093ea3e3b456.js () 2.04 kB  [rendered]
chunk {12} es2015-polyfills.50f1d975a2be7ad3eb5b.js (es2015-polyfills) 56.6 kB [initial] [rendered]
chunk {13} main.c390538bad613cffa7bc.js (main) 4.25 MB [initial] [rendered]
chunk {14} polyfills.86da5ebcdfaf045705ef.js (polyfills) 41.1 kB [initial] [rendered]
chunk {15} styles.af6b9b67c6922d51ff70.css (styles) 210 kB [initial] [rendered]
chunk {16} 16.e16e9a2a3bec0a4f33af.js () 145 kB  [rendered]
chunk {17} 17.df5e4f6609e8016ecf74.js () 72.6 kB  [rendered]
chunk {18} 18.e468e9048c635f754bd3.js () 72.4 kB  [rendered]
chunk {19} 19.930a443730d77bab4eb0.js () 72.1 kB  [rendered]
chunk {20} 20.d366c4c0473741709545.js () 71.9 kB  [rendered]
chunk {21} 21.c1c9a6a69a4cfd9077ec.js () 30.2 kB  [rendered]
chunk {22} 22.b6065ec64656195c346e.js () 8.08 kB  [rendered]
chunk {23} 23.95e48c8f4ed604b0deff.js () 17.9 kB  [rendered]
chunk {24} 24.16f2c8e126a68df25aa6.js () 4.32 kB  [rendered]
chunk {25} 25.f1851f79f80e8302b98a.js () 12.4 kB  [rendered]
chunk {26} 26.dd47f5b080dcf5c95baf.js () 9.51 kB  [rendered]
chunk {27} 27.a77f7820db37c3649e9e.js () 19.8 kB  [rendered]
chunk {28} 28.7e6491f2920d01c35611.js () 19.8 kB  [rendered]
chunk {29} 29.c79086bcc2ec3b73b516.js () 34.2 kB  [rendered]
chunk {30} 30.8d19c94ee63f2be02a82.js () 33 kB  [rendered]
chunk {31} 31.5e52620aa20c682a8635.js () 2.63 kB  [rendered]
chunk {32} 32.3179e3cf3bd3aebeb6fc.js () 2.69 kB  [rendered]
chunk {33} 33.6ae3fc10b1706bf281c3.js () 7.48 kB  [rendered]
chunk {34} 34.1f8c6378689e43db9d7f.js () 8.03 kB  [rendered]
chunk {35} 35.b9fe92322827b5ba0027.js () 1.53 kB  [rendered]
chunk {36} 36.1f9335b145a99d04494f.js () 1.53 kB  [rendered]
chunk {37} 37.643e5be2c3c5753c6d39.js () 14.5 kB  [rendered]
chunk {38} 38.785f882eeb118c421c99.js () 14.7 kB  [rendered]
chunk {39} 39.f7dfda9a49e5d4ab7068.js () 7.8 kB  [rendered]
chunk {40} 40.6930a59d0d57a7d2b37b.js () 7.34 kB  [rendered]
chunk {41} 41.c8a65402c050f49fc98a.js () 4.92 kB  [rendered]
chunk {42} 42.49f67ec0431f49b4a246.js () 5.05 kB  [rendered]
chunk {43} 43.5ab8ee952970107dd4ee.js () 4.17 kB  [rendered]
chunk {44} 44.7447c1e7c481cbd80f9e.js () 4.17 kB  [rendered]
chunk {45} 45.1b32b9f438f07fa2179f.js () 11.5 kB  [rendered]
chunk {46} 46.8869f3385b6d72ce8947.js () 30.9 kB  [rendered]
chunk {47} 47.292d3db75f9504f3046e.js () 30.6 kB  [rendered]
chunk {48} 48.d25b2b5f9ef9e659e869.js () 14.2 kB  [rendered]
chunk {49} 49.57ed4fca955f6760b23a.js () 13.3 kB  [rendered]
chunk {50} 50.358ceac5a0f5e25d0ce0.js () 1.7 kB  [rendered]
chunk {51} 51.b97cc6a2606b4e5534cd.js () 5.24 kB  [rendered]
chunk {52} 52.1051d66edae4a790a908.js () 5.23 kB  [rendered]
chunk {53} 53.515074bbeede23477742.js () 9.03 kB  [rendered]
chunk {54} 54.41c7bcdfd4a81c8e2599.js () 8.93 kB  [rendered]
chunk {55} 55.16e6542967e1daeb04ec.js () 15.6 kB  [rendered]
chunk {56} 56.7d0a29613b3206ffb645.js () 15.4 kB  [rendered]
chunk {57} 57.2eaabca7aadad6d3e103.js () 30.5 kB  [rendered]
chunk {58} 58.c987554760d1400d5408.js () 34.1 kB  [rendered]
chunk {59} 59.f3582c52e7cfb76c7b34.js () 6.27 kB  [rendered]
chunk {60} 60.daf2a8fc56fe3cb65bc4.js () 5.95 kB  [rendered]
chunk {61} 61.b62bc6a5ce58237674cb.js () 16.3 kB  [rendered]
chunk {62} 62.7335a92fee5425da4a3b.js () 16.4 kB  [rendered]
chunk {63} 63.997c99535ff4be4c3260.js () 6.04 kB  [rendered]
chunk {64} 64.6808ef038107451194e4.js () 6.09 kB  [rendered]
chunk {65} 65.13c58afa4904beb1fe39.js () 15 kB  [rendered]
chunk {66} 66.f279884d05605388f833.js () 8.28 kB  [rendered]
chunk {67} 67.7b5499c64801203dea6a.js () 7.63 kB  [rendered]
chunk {68} 68.03d7666f871b32b72ee5.js () 9.55 kB  [rendered]
chunk {69} 69.906dac4865d1e8016725.js () 9.55 kB  [rendered]
chunk {70} 70.26e03af8738136ee5c99.js () 6.84 kB  [rendered]
chunk {71} 71.0063ce1a59040c6b61e8.js () 7.07 kB  [rendered]
chunk {72} 72.23c3d4af2e427ced3d13.js () 12.3 kB  [rendered]
chunk {73} 73.acd5c6e544dbbdd5a77b.js () 13.7 kB  [rendered]
chunk {74} 74.6d56483b36861dca3a96.js () 7.48 kB  [rendered]
chunk {75} 75.d95259c8bd33db75b10e.js () 7.47 kB  [rendered]
chunk {76} 76.dcc8a16e1f0ec964dfa2.js () 5.81 kB  [rendered]
chunk {77} 77.70d32390ac848d9dec84.js () 5.81 kB  [rendered]
chunk {78} 78.29296f9564004e43994b.js () 3.44 kB  [rendered]
chunk {79} 79.ecb6f4c49497186cea29.js () 12.1 kB  [rendered]
chunk {80} 80.0dbdf9555d86b79d3eb9.js () 16.5 kB  [rendered]
chunk {81} 81.8a3e80dbc9f611ca1f96.js () 14.1 kB  [rendered]
chunk {82} 82.9999017c63f02f0962fd.js () 12.4 kB  [rendered]
chunk {83} 83.11df47f83827a763bebf.js () 12 kB  [rendered]
chunk {84} 84.90a77fdd7001980dcd67.js () 11.3 kB  [rendered]
chunk {85} 85.cdc3ea4e76ebf8517751.js () 11.3 kB  [rendered]
chunk {86} 86.c78882a2573cfb581abb.js () 30.2 kB  [rendered]
chunk {87} 87.0486680845504dc179a0.js () 30.2 kB  [rendered]
chunk {88} 88.b640dd9fa3f9998b7657.js () 6.15 kB  [rendered]
chunk {89} 89.5b5bad5b60c68a8aa6c1.js () 3.79 kB  [rendered]
chunk {90} 90.5ba1d6341b63e0076e4d.js () 3.79 kB  [rendered]
chunk {91} 91.1c6263dd950fc940ee55.js () 11.2 kB  [rendered]
chunk {92} 92.17c48ae40448be4b0ce0.js () 11.3 kB  [rendered]
chunk {93} 93.b88cf55b91e340a66838.js () 5.04 kB  [rendered]
chunk {94} 94.26ec496c1fb8f2970f24.js () 567 bytes  [rendered]
chunk {95} 95.66fde2318aa08e71f510.js () 7.44 kB  [rendered]
chunk {96} 96.862e9acc788fa9d49987.js () 7.47 kB  [rendered]
chunk {97} 97.dd3f7b4b8e6d3559c60c.js () 9.71 kB  [rendered]
chunk {98} 98.5f9676601e6e6c320e30.js () 10.3 kB  [rendered]
chunk {99} 99.8f2b2b41fe08674abb33.js () 7.23 kB  [rendered]
chunk {100} 100.86dc578ee8ee58bca216.js () 7.07 kB  [rendered]
chunk {101} 101.07ceeeaf6ab123c773ad.js () 8.69 kB  [rendered]
chunk {102} 102.e697f08549c9de76bebb.js () 8.84 kB  [rendered]
chunk {103} 103.38a96fe219c65016b780.js () 982 bytes  [rendered]
chunk {104} 104.48686ac5f5acf3253e15.js () 4.57 kB  [rendered]
chunk {105} 105.81f4d4745b4abcd05abe.js () 77.1 kB  [rendered]
chunk {106} 106.5247e24b6bea3a6ef019.js () 18 kB  [rendered]

WARNING in Circular dependency detected:
src\app\coms\spin\spin.component.ts -> src\app\shared\service\sub-tabs.service.ts -> src\app\coms\spin\spin.component.ts

WARNING in Circular dependency detected:
src\app\shared\service\sub-tabs.service.ts -> src\app\coms\spin\spin.component.ts -> src\app\shared\service\sub-tabs.service.ts

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 2.55 MB.
gzipper: 1522 files have been compressed. (4s 674.172617ms)