search

akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.29k stars 7.96k forks source link

nebular compile is too slow and imported moudle is too many #5465

Open BAZINGAyi opened 5 years ago

BAZINGAyi commented 5 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: I used ngx-admin as framework, but i found complie project is too slow and are too moudles in there. The size of dist maybe are 70M After using ng build. I want to know how to optimize it.

Thx. Wish your response.

Other information:

npm, node, OS, Browser

node :  v8.11.3
os: windows 10
browser: chrome

Angular, Nebular

{
  "name": "ngx-admin",
  "version": "2.3.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 11"
  ],
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "file:node_modules/@angular/material",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "2.0.1",
    "@nebular/bootstrap": "2.0.1",
    "@nebular/security": "2.0.1",
    "@nebular/theme": "2.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0",
    "@swimlane/ngx-charts": "7.0.1",
    "@swimlane/ngx-datatable": "14.0.0",
    "angular-material-datepicker": "^1.0.2",
    "angular-tree-component": "7.2.0",
    "angular2-baidu-map": "4.5.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "6.0.0",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.0.2",
    "font-awesome": "^4.7.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.0.9",
    "ng2-ckeditor": "1.1.13",
    "ng2-completer": "2.0.8",
    "ng2-smart-table": "1.3.5",
    "ng5-slider": "^1.1.6",
    "ngx-echarts": "2.0.1",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "primeng": "^4.3.0",
    "roboto-fontface": "0.8.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "socicon": "3.0.5",
    "sweetalert": "^2.1.2",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "3.30.4",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "6.0.90",
    "codelyzer": "4.0.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "0.9.6",
    "typescript": "2.7.2",
    "@angular-devkit/build-angular": "~0.6.0"
  }
}
andredatsch commented 5 years ago

thats strange, my final release size is about 17mb using nebular 7, when i was with nebular 4, was 14mb, are you sure that you don't have any extra files?

biborn commented 5 years ago

thats strange, my final release size is about 17mb using nebular 7, when i was with nebular 4, was 14mb, are you sure that you don't have any extra files?

I believe you're talking about Angular 7 & Angular 4 instead of Nebular. Regardless, I can confirm that the file size is 17MB using npm run build:prod

andredatsch commented 5 years ago

thats strange, my final release size is about 17mb using nebular 7, when i was with nebular 4, was 14mb, are you sure that you don't have any extra files?

I believe you're talking about Angular 7 & Angular 4 instead of Nebular. Regardless, I can confirm that the file size is 17MB using npm run build:prod

No, when i was using version 4 of NgxAdmin, i use it since version 4

biborn commented 5 years ago

No, when i was using version 4 of NgxAdmin, i use it since version 4

Current ngx-admin version is 3.0.0. There's no version 4 yet.

andredatsch commented 5 years ago

No, when i was using version 4 of NgxAdmin, i use it since version 4

Current ngx-admin version is 3.0.0. There's no version 4 yet.

Yeah, you are right, anyway, since that version, lol

d1e648ffce2bdc2bfabc6fefa9031c7e

BAZINGAyi commented 5 years ago

@andredatsch， @biborn.

Thanks, everyone.

It reduces the size of dist dictionary By using npm run build:prod.

But I still have a question about that, how to remove useless module. For example, Need I remove moudle name in package.json? I just want to reduce my project size? What is the good way?

Gus

biborn commented 5 years ago

@andredatsch， @biborn.

Thanks, everyone.

It reduces the size of dist dictionary By using npm run build:prod.

But I still have a question about that, how to remove useless module. For example, Need I remove moudle name in package.json? I just want to reduce my project size? What is the good way?

Gus

Every package in package.json is a dependency for the project, removing them might cause unexpected result. It is better to leave it alone, unless you're really sure you're not using them in your code.

Another good way to reduce the dist size is by using SVG image instead of PNG or JPG. Check for large image size in your project and substitute them with SVG file if possible, or compress the image using tinypng or other tools you're familiar with.

BAZINGAyi commented 5 years ago

@andredatsch， @biborn. Thanks, everyone. It reduces the size of dist dictionary By using npm run build:prod. But I still have a question about that, how to remove useless module. For example, Need I remove moudle name in package.json? I just want to reduce my project size? What is the good way? Gus

Every package in package.json is a dependency for the project, removing them might cause unexpected result. It is better to leave it alone, unless you're really sure you're not using them in your code.

Another good way to reduce the dist size is by using SVG image instead of PNG or JPG. Check for large image size in your project and substitute them with SVG file if possible, or compress the image using tinypng or other tools you're familiar with.

Thx your repley, I will try.

Best regards！

Gus

tayambamwanza commented 5 years ago

@BAZINGAyi what are bundle sizes like now?

vardan13 commented 5 years ago

ngx-admin is building es5 and es2015 javascript files for browser compatibility you can generate only es5 javascript build by changing "target": "es5", in the tsconfig.json file . Surely es5 has browser compatibility almost 100% https://kangax.github.io/compat-table/es5/ as compared to es2015 https://kangax.github.io/compat-table/es6/ .

tsconfig.json file { "compileOnSave": false, "compilerOptions": { "importHelpers": true, "module": "esnext", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ], "plugins": [ { "name": "tslint-language-service"} ] } } Reduces Build size from 18MB to 11MB