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打包分离，仍在实践中，成功后续更。