From 648da3580bfd8e964574b1bfd999aad1d47a052b Mon Sep 17 00:00:00 2001 From: Wendell Date: Tue, 16 Oct 2018 14:04:04 +0800 Subject: [PATCH] refactor(module:icon): switch dependency to support tree shake (#2266) * refactor(module:icon): switch dependency to support tree shake * fix(module:icon): fix integration * fix(module:icon): change assets path --- angular.json | 2 +- components/breadcrumb/demo/separator.ts | 1 - components/icon/demo/basic.ts | 3 ++- components/icon/doc/index.en-US.md | 23 +++++++-------------- components/icon/doc/index.zh-CN.md | 23 +++++++-------------- components/icon/nz-icon.directive.ts | 21 ++++--------------- components/icon/nz-icon.spec.ts | 22 +++++++------------- components/icon/page/index.ts | 11 ++++++---- components/ng-zorro-antd.module.ts | 3 ++- components/package.json | 2 +- package.json | 3 ++- schematics/fix-icon/index.ts | 2 +- scripts/site/_site/src/app/app.component.ts | 8 ------- 13 files changed, 42 insertions(+), 82 deletions(-) diff --git a/angular.json b/angular.json index 8152c48314b..08b3d034b2b 100644 --- a/angular.json +++ b/angular.json @@ -22,7 +22,7 @@ "site/src/404.html", { "glob": "**/*", - "input": "./node_modules/@ant-design/icons/inline-svg/", + "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], diff --git a/components/breadcrumb/demo/separator.ts b/components/breadcrumb/demo/separator.ts index 7438fca6742..ef9f91d8d4a 100644 --- a/components/breadcrumb/demo/separator.ts +++ b/components/breadcrumb/demo/separator.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { ArrowRightOutline } from '@ant-design/icons-angular/icons'; @Component({ selector: 'nz-demo-breadcrumb-separator', diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts index 3e548de9af8..287e608efaf 100644 --- a/components/icon/demo/basic.ts +++ b/components/icon/demo/basic.ts @@ -8,13 +8,14 @@ import { Component } from '@angular/core'; +

- + `, styles: [ ` diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md index 54c6f4dc7c4..131de7f8133 100755 --- a/components/icon/doc/index.en-US.md +++ b/components/icon/doc/index.en-US.md @@ -65,32 +65,23 @@ All the icons will be rendered to ``, and styles and classes applied to ` antDesignIcons[key]) - ); - // Import what you need. - // this.iconService.addIcon(ApartmentOutline); + this.iconService.addIcon(ApartmentOutline); } } ``` -Static loading would increase your bundle's size so we strongly recommend you not to register all of the icons. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details. +Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details. + +> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically. Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your `angular.json` like this: @@ -99,7 +90,7 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO "assets": [ { "glob": "**/*", - "input": "./node_modules/@ant-design/icons/inline-svg/", + "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ] diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md index 8f994227b19..8e45e35c3ef 100755 --- a/components/icon/doc/index.zh-CN.md +++ b/components/icon/doc/index.zh-CN.md @@ -66,32 +66,23 @@ NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解 对于 Ant Design 提供的图标，我们提供了两种方式来加载图标资源文件。 -静态加载，通过在 `NzIconService` 中注册图标来实现静态引入，引入后的文件会被打包到 `.js` 文件中。可以全量引入，也可以按需引入，在 constructor 里或者在 `AppInitService` 里（推荐），例如： +静态加载，通过在 `NzIconService` 中注册图标来实现静态引入，引入后的文件会被打包到 `.js` 文件中。在 constructor 里或者在 `AppInitService` 里（推荐），例如： ```ts -import { IconDefinition } from '@ant-design/icons-angular'; -import * as AllIcons from '@ant-design/icons-angular/icons'; +import { ApartmentOutline } from '@ant-design/icons-angular/icons'; import { NzIconService } from 'ng-zorro-antd'; -// import { ApartmentOutline } from '@ant-design/icons-angular/icons'; - export class AppComponent implements OnInit, AfterViewInit { constructor(private iconService: NzIconService) { - // Import all. - const antDesignIcons = AllIcons as { - [key: string]: IconDefinition; - }; - this.iconService.addIcon(...Object.keys(antDesignIcons).map( - key => antDesignIcons[key]) - ); - // Import what you need. - // this.iconService.addIcon(ApartmentOutline); + this.iconService.addIcon(ApartmentOutline); } } ``` -静态引入会增加包体积，我们非常不建议使用全量引入的方式，具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。 +静态引入会增加包体积，所以我们建议尽可能地使用动态加载，如果要静态加载，也仅仅加载你需要用到的 icon，具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。 + +> 为了加快渲染速度，`NG-ZORRO` 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。 动态加载，这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时，会发起 HTTP 请求动态引入。你只需要配置 `angular.json` 文件： @@ -100,7 +91,7 @@ export class AppComponent implements OnInit, AfterViewInit { "assets": [ { "glob": "**/*", - "input": "./node_modules/@ant-design/icons/inline-svg/", + "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ] diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts index c69e91bd94d..33a541a7ec0 100644 --- a/components/icon/nz-icon.directive.ts +++ b/components/icon/nz-icon.directive.ts @@ -9,7 +9,7 @@ import { OnInit, Renderer2 } from '@angular/core'; -import { withSuffix, IconDirective } from '@ant-design/icons-angular'; +import { IconDirective } from '@ant-design/icons-angular'; import { NzIconService } from './nz-icon.service'; /** @@ -35,17 +35,13 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, * Should be removed in next major version. */ private _classChangeHandler(className: string): void { - if (!className) { - return; - } + if (!className) { return; } const forceSpin = className.indexOf('anticon-spin') > -1; const classArr = className.split(/\s/); let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ]; - if (!anticonType) { - return; - } + if (!anticonType) { return; } anticonType = anticonType.replace('anticon-', ''); if (anticonType.includes('verticle')) { @@ -65,19 +61,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) { anticonType += '-o'; } - if (anticonType.startsWith('loading') || forceSpin) { - this.spin = true; - } else { - this.spin = false; - } if (this.type !== anticonType) { this.type = anticonType; - this._changeIcon() - .then(svg => { - this._addExtraModifications(svg); - }) - .catch(err => { + this._changeIcon().catch(err => { console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err); }); } diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts index d29341a58e7..094c1f64c11 100644 --- a/components/icon/nz-icon.spec.ts +++ b/components/icon/nz-icon.spec.ts @@ -15,13 +15,13 @@ describe('icon', () => { beforeEach(() => { TestBed.configureTestingModule({ imports : [ CommonModule, NzIconModule ], - declarations: [ NzTestIconComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ] + declarations: [ NzTestIconExtensionsComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ] }).compileComponents(); }); describe('extensions', () => { beforeEach(() => { - fixture = TestBed.createComponent(NzTestIconComponent); + fixture = TestBed.createComponent(NzTestIconExtensionsComponent); testComponent = fixture.debugElement.componentInstance; icons = fixture.debugElement.queryAll(By.directive(NzIconDirective)); }); @@ -77,7 +77,6 @@ describe('icon', () => { it('should support iconfont', async(() => { fixture.detectChanges(); - fixture.whenStable().then(() => { fixture.detectChanges(); icons = fixture.debugElement.queryAll(By.directive(NzIconDirective)); @@ -104,24 +103,17 @@ describe('icon', () => { expect(icons[ 0 ].nativeElement.className).toContain('anticon'); expect(icons[ 0 ].nativeElement.innerHTML).toContain('svg'); }); - - it('should make loading spin', fakeAsync(() => { - fixture.detectChanges(); - tick(1000); - fixture.detectChanges(); - expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true); - })); }); }); @Component({ - selector: 'nz-test-icon', + selector: 'nz-test-icon-extensions', template: ` ` }) -export class NzTestIconComponent { +export class NzTestIconExtensionsComponent { type = 'question'; theme = 'outline'; spin = true; @@ -163,8 +155,10 @@ export class NzTestIconIconfontComponent { @Component({ selector: 'nz-test-icon-old-api', template: ` - - + + + + ` }) export class NzTestIconOldApiComponent { diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts index 30ea22e9668..8fe05a4062d 100644 --- a/components/icon/page/index.ts +++ b/components/icon/page/index.ts @@ -1,7 +1,8 @@ import { DOCUMENT } from '@angular/common'; import { Component, Inject, OnInit } from '@angular/core'; - -const mani = require('@ant-design/icons/lib/manifest').default; +import { manifest } from '@ant-design/icons-angular'; +import { AccountBookFill } from '@ant-design/icons-angular/icons'; +import { NzIconService } from 'ng-zorro-antd'; const categories = { direction : [ @@ -249,7 +250,7 @@ export class NzPageDemoIconComponent implements OnInit { const names = Object.keys(categories) .map(category => ({ name : category, - icons: categories[ category ].filter(name => mani[ value ].indexOf(name) > -1) + icons: categories[ category ].filter(name => manifest[ value ].indexOf(name) > -1) })) .filter(({ icons }) => Boolean(icons.length)); @@ -258,7 +259,9 @@ export class NzPageDemoIconComponent implements OnInit { this.currentTheme = value; } - constructor(@Inject(DOCUMENT) private dom: any) { + constructor(@Inject(DOCUMENT) private dom: any, private _iconService: NzIconService) { + // This is to test that tree shake works! + this._iconService.addIcon(AccountBookFill); } ngOnInit() { diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts index 71bed428b9f..f33985417b2 100644 --- a/components/ng-zorro-antd.module.ts +++ b/components/ng-zorro-antd.module.ts @@ -1,4 +1,5 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; + import { NzAffixModule } from './affix/nz-affix.module'; import { NzAlertModule } from './alert/nz-alert.module'; import { NzAnchorModule } from './anchor/nz-anchor.module'; @@ -32,7 +33,6 @@ import { NzMenuModule } from './menu/nz-menu.module'; import { NzMessageModule } from './message/nz-message.module'; import { NzModalModule } from './modal/nz-modal.module'; import { NzNotificationModule } from './notification/nz-notification.module'; -import { NzTreeSelectModule } from './tree-select/nz-tree-select.module'; import { NzPaginationModule } from './pagination/nz-pagination.module'; import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module'; import { NzPopoverModule } from './popover/nz-popover.module'; @@ -52,6 +52,7 @@ import { NzTimePickerModule } from './time-picker/nz-time-picker.module'; import { NzTimelineModule } from './timeline/nz-timeline.module'; import { NzToolTipModule } from './tooltip/nz-tooltip.module'; import { NzTransferModule } from './transfer/nz-transfer.module'; +import { NzTreeSelectModule } from './tree-select/nz-tree-select.module'; import { NzTreeModule } from './tree/nz-tree.module'; import { NzUploadModule } from './upload/nz-upload.module'; diff --git a/components/package.json b/components/package.json index cb26ad18bc6..d89d316f0a1 100644 --- a/components/package.json +++ b/components/package.json @@ -23,7 +23,7 @@ "dependencies": { "date-fns": "^1.29.0", "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "0.0.1-alpha.1" + "@ant-design/icons-angular": "^0.0.1" }, "peerDependencies": { "@angular/animations": "^6.0.0", diff --git a/package.json b/package.json index 6d29bf8d438..47791b86a29 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "0.0.1-alpha.1", + "@ant-design/icons-angular": "^0.0.1", "date-fns": "^1.29.0" }, "devDependencies": { @@ -103,6 +103,7 @@ "tslib": "^1.9.0", "tslint": "~5.11.0", "typescript": "~2.9.2", + "webpack-bundle-analyzer": "^3.0.2", "yaml-front-matter": "^3.4.0", "zone.js": "^0.8.26" }, diff --git a/schematics/fix-icon/index.ts b/schematics/fix-icon/index.ts index 86e047be9b3..80ea7cd0b10 100644 --- a/schematics/fix-icon/index.ts +++ b/schematics/fix-icon/index.ts @@ -5,7 +5,7 @@ import { Schema } from './schema'; const ICON_ASSET_CONFIG = { 'glob' : '**/*', - 'input' : './node_modules/@ant-design/icons/inline-svg/', + 'input' : './node_modules/@ant-design/icons-angular/src/inline-svg/', 'output': '/assets/' }; diff --git a/scripts/site/_site/src/app/app.component.ts b/scripts/site/_site/src/app/app.component.ts index fa930eee74e..ca4e30ae279 100644 --- a/scripts/site/_site/src/app/app.component.ts +++ b/scripts/site/_site/src/app/app.component.ts @@ -1,8 +1,6 @@ import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { NavigationEnd, Router } from '@angular/router'; -import { IconDefinition } from '@ant-design/icons-angular'; -import * as AllIcons from '@ant-design/icons-angular/icons'; import { en_US, zh_CN, NzI18nService, NzIconService, NzMessageService } from 'ng-zorro-antd'; import { environment } from '../environments/environment'; import { ROUTER_LIST } from './router'; @@ -45,12 +43,6 @@ export class AppComponent implements OnInit, AfterViewInit { } constructor(private router: Router, private title: Title, private nzI18nService: NzI18nService, private msg: NzMessageService, private iconService: NzIconService) { - const antDesignIcons = AllIcons as { - [key: string]: IconDefinition; - }; - this.iconService.addIcon(...Object.keys(antDesignIcons).map( - key => antDesignIcons[key]) - ); this.iconService.twoToneColor = { primaryColor: '#1890ff' }; }