Angular6項目打包優化

能夠從如下三個角度優化：

1. 輸出包體組成分析文件
2. Rollup 搖樹優化
3. 導出Webpack配置，經過修改webpack配置優化打包

讓咱們來逐一分析。

輸出包體組成分析文件

Webpack 有一個很是好用的工具叫 webpack-bundle-analyzer，會自動分析包體組成結構，並以一種可視化的方式顯示。

使用步驟:

1. 打開項目，命令行輸入：npm install webpack-bundle-analyzer --save-dev
2. 命令行輸入項目打包命令加--stats-json
3. 在package.json文件的"scripts"裏配置裏，添加"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"
4. 命令行輸入：npm run bundle-report
5. 瀏覽器輸入：http://127.0.0.1:8888/ 查看分析圖，根據分析圖瞭解一些優化的細節

備註：在不影響性能的狀況下，儘可能少用Base64引入圖片，把圖片放在本地引入，不會打包到項目中去，但使用Base64編碼的圖片，會以圖片的1.5倍體積打包到項目中去，且若該圖片爲精靈圖，使用圖片時採起了div切圖，切了幾回，就會打包幾回，佔用體積很是大。具體能夠參考如下：www.imooc.com/article/278…

Rollup 搖樹優化

所謂Rollup是指Webpack2會把那些應用中未使用的引用代碼除掉，但不會刪除這些代碼，因此就須要配合 UglifyJs 可以智能的移除這些未使用的代碼。從而減小包體大小。

而Agnular應用是基於Typescript，所以Angular Cli提供了一個叫 Angular Build Optimizer 插件，將 Typescript 編譯結果轉化成更友好的UglifyJs版本。這樣UglifyJs就可以更有效的移除那些未使用的代碼

方法一：Angular Cli只須要在打包命令中加上 --build-optimizer 參數就能夠，在一些狀況下壓縮的仍是很厲害的（但我作優化的過程當中，使用了這樣的方法，毫無做用）

方法二：去掉沒有用到的模塊，從而減少體積

1. moment

   • 對於 ng-cli 的項目:

     （1）運行npm uninstall moment

     （2）運行npm install moment --save-dev

     （3）.angular-cli.json 文件的 scripts 里加上"../node_modules/moment/min/moment.min.js"

     （4）typings.d.ts 文件的最後加上 declare var moment: any;

     （5）將項目中的代碼 import * as moment from 'moment';所有幹掉

     備註：若是想應用其中某個庫則須要（以 fr 爲例）

     引入：import "moment/locale/fr";

     使用：moment.locale("fr");

   • 對於 webpack 的項目：

     （1）在 webpack 配置文件的 plugins 里加上

     new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, / /) 或者

     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

     備註：若是想應用其中某個庫則須要（以 de、fr、hu 爲例），在 webpack 配置文件的 plugins 里加上

     new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

2. @ng-bootstrap/ng-bootstrap

   若是在項目中要用到 @ng-bootstrap/ng-bootstrap 庫，要注意一下使用方法，若是按照其官網示例方式引入的話，在打包的時候會把其下全部模塊引入進來，無論你用沒用到。因此要想辦法把沒有用到的模塊幹掉，只引入須要的模塊。

   以時間組件爲例，官網示例：

   // 根模塊
   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     declarations: [AppComponent, ...],
     imports: [NgbModule.forRoot(), ...],  
     bootstrap: [AppComponent]
   })
   export class AppModule {
   }
   複製代碼

   // 其餘須要模塊
   import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     declarations: [OtherComponent, ...],
     imports: [NgbModule, ...],
   })
   export class OtherModule {
   }
   複製代碼

   更改成：

   // 根模塊
   import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     declarations: [AppComponent, ...],
     imports: [NgbDatepickerModule.forRoot(), NgbTimepickerModule.forRoot() ...],  
     bootstrap: [AppComponent]
   })
   export class AppModule {
   }
   複製代碼

   // 其餘須要模塊
   import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     declarations: [OtherComponent, ...],
     imports: [NgbDatepickerModule, NgbTimepickerModule, ...],
   })
   export class OtherModule {
   }
   複製代碼

導出Webpack配置

方法一：eject（Angular6可能不支持）

方法二：工具庫ngx-build-plus

我指望經過導出Webpack配置的方式，使scss文件與main.js打包分離，仍在實踐中，成功後續更。