Ng-zorro-antd: 跟组件中引用体积过大

[100cm]

2m的体积，能否像material 那样分模块，在官方文档中好像没找到？能否告知一下 ，多谢

[trotyl]

Could you make sure you're using @angular/cli that higher than 1.3.0 with:

ng build --prod --build-optimizer

If this problem still exists, can you help to provide a screenshot for the executing result of that specific command?

[100cm]

I am in develop mode, and i am not using cli, just my webpack config

[trotyl]

That should be fine, for webpack you can still easily integrate with build optimizer, but it won't provide support for non-webpack as suggested in https://github.com/angular/devkit/issues/102#issuecomment-322428726.

[trotyl]

Wait a minute, are you using JIT for production?

[100cm]

yes , so it is normal do ?

[100cm]

i am still not using aot now.

[trotyl]

JIT is already known for bad performance and shouldn't be used for production at all, moreover, in v5 Angular team would made AOT available and default for all conditions (dev, test or even online demo) as suggested in meeting notes.

[100cm]

ok,i will try, thank u .

[vthinkxie]

@icepoint0
You can just import sub module like

import { NzButtonModule } from 'nz-zorro-antd';

But this is not recommended since without nz-root module and forRoot method, module may run with unpredictable problem, and has not been tested yet.

Supporting sub module import method is in our roadmap, before that you can use build-optimizer to reduce output size.

Thanks

[LinPoLen]

should only using npm install ng-zorro-antd, and with build script from own project. no need to use builds from ng-zorro-antd

[trotyl]

By using build-optimizer, the size would reduce from 1.71MB down to 791KB even if you include the full lib, but that's true there're still ways to improve that.

[cipchk]

优化空间还蛮大的，至少下列两点能起蛮大作用：

• 依赖 moment，但在打包时会把所有语言包一并导入。
• less 可以考虑在打包前先压缩。

[100cm]

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/icepoint1999/code/yunshen/jk/node_modules/ng-zorro-antd/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/icepoint1999/code/yunshen/jk/node_modules/ng-zorro-antd/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/icepoint1999/code/yunshen/jk/node_modules/ng-zorro-antd/node_modules/@angular/core/core.d.ts

when using AOT with webpack plugin ? how to fix it?

[trotyl]

That's an error of dependencies setting, being tracked at https://github.com/NG-ZORRO/ng-zorro-antd/issues/23.

[100cm]

@trotyl 按照你说的aot打包 居然还是2.7m+ 这次我用的是angular cli。这是为什么

[trotyl]

As I said in first reply, please try --prod --build-optimizer. If you have really tried that, you'll encounter the same error as #50 . So I guess you're not following my suggestion at all.

[100cm]

@trotyl jk git:(sit) ✗ npm run aot -- --build-optimizer

> [email protected] aot /Users/atyun/code/jk
> ng build --prod --env=prod  "--build-optimizer"

Date: 2017-08-17T10:54:19.377Z
Hash: a1bf830a77f0f6dc6ccc
Time: 169283ms
chunk {0} main.d2a69d81c1dfd449a71c.bundle.js (main) 2.52 MB {4} [initial] [rendered]
chunk {1} polyfills.bbca6f53eaf4eb263e87.bundle.js (polyfills) 62.9 kB {4} [initial] [rendered]
chunk {2} scripts.f2ad4b7cd45af0875179.bundle.js (scripts) 597 kB {4} [initial] [rendered]
chunk {3} styles.5a30b9623295641d5263.bundle.css (styles) 91 kB {4} [initial] [rendered]
chunk {4} inline.c2b204d1acf93ca592c4.bundle.js (inline) 1.47 kB [entry] [rendered]

[trotyl]

@icepoint0 https://travis-ci.org/trotyl/ng-zorro-bo-error/builds/265545100

-rw-r--r-- 1 travis   5502 Aug 17 12:03 3rdpartylicenses.txt
-rw-r--r-- 1 travis   5430 Aug 17 12:03 favicon.ico
-rw-r--r-- 1 travis    594 Aug 17 12:03 index.html
-rw-r--r-- 1 travis   1447 Aug 17 12:03 inline.237ffcbf3c7318348425.bundle.js
-rw-r--r-- 1 travis 881537 Aug 17 12:03 main.cc9e30bbce9ac9b26490.bundle.js
-rw-r--r-- 1 travis  62929 Aug 17 12:03 polyfills.b875f2c907a7cf03eea5.bundle.js
-rw-r--r-- 1 travis      0 Aug 17 12:03 styles.d41d8cd98f00b204e980.bundle.css

If you have any other problem, please reproduce it in CI with a latest fresh Angular CLI project.

[fengbaozhiling]

@trotyl

你好，看了你打包出来的main.js，仍然好大，它将moment语言包都压缩进去了，可在开发项目的时候都没用上moment。这两天在想办法去掉moment，研究了两天没搞定。

[fulvaz]

According to the result of webpack-bundle-analyzer, moment locale is the problem.

here is my solution:

create a script named rm-moment-locale.js in your project root

copy and paste following content

var globby = require('globby');
var rimraf = require('rimraf');
const path = require('path');

globby([path.resolve(__dirname, '../node_modules/moment/locale/*'), `!${path.resolve(__dirname, '../node_modules/moment/locale/zh-cn.js')}`])
  .then(function then(paths) {
    paths.map(function map(item) {
      rimraf.sync(item);
    });
    console.log('remove redundent moment locales');
  });

add postinstall to your package.json

 "scripts": {
    .....
    "postinstall": "node task/rm-moment-locale.js"
  },

reinstall your deps

problem solved.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.