Search code examples
angularrxjslodash

Get rid of whole lodash dependency when importing rx.js in a project

Decided to use partial lodash import in my Angular 4 project, kind of:

import chunk from 'lodash-es/array/chunk';
import zipObject from 'lodash-es/array/zipObject';

And eveything looks good untill i decided to check bundle details with WebpackBundleAnalyzer. And found that whole lodash is still there! After small investigation in dependencies I realized that rx.js has lodash in its dependencies

Does anyone have experience how to remove whole lodash from a project if it contains rx.js? Please, share you experience.

Here is my partial package.json file:

{
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^4.4.6",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.5",
    "@ngrx/store": "^2.2.3",
    "angular2-highcharts": "^0.5.5",
    "angular2-toaster": "^4.0.1",
    "core-js": "^2.5.1",
    "highcharts": "^5.0.14",
    "ie-shim": "^0.1.0",
    "lodash-es": "^4.17.4",
    "moment-timezone": "^0.5.14",
    "mydatepicker-custom-ver": "^1.0.2",
    "ng-click-outside": "^3.2.0",
    "ngx-tooltip-selectable": "^0.1.22",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^4.4.6",
    "@ngrx/store-devtools": "^3.2.4",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.45",
    "@types/node": "^7.0.13",
    "@types/uglify-js": "^2.6.28",
    "@types/webpack": "^2.2.15",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.1.2",
    "codelyzer": "~2.1.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "dotenv-webpack": "^1.5.0",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "~2.1.0",
    "file-loader": "^0.11.1",
    "find-root": "^1.0.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "inline-manifest-webpack-plugin": "^3.0.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "~2.0.3",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "~2.0.0",
    "node-sass": "^4.5.2",
    "npm-run-all": "^4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.2",
    "protractor": "^5.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.1",
    "sass-loader": "^6.0.3",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "source-map-loader": "^0.2.1",
    "string-replace-loader": "~1.2.0",
    "style-loader": "^0.16.1",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.3.0",
    "tslib": "^1.6.1",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.5.2",
    "typedoc": "^0.5.10",
    "typescript": "~2.7.2",
    "url-loader": "^0.5.8",
    "webpack": "~2.4.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "~2.4.2",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~4.1.0"
  },

}
Solution

  • First of all, I don't think rxjs has lodash in its dependencies. It has lodash in it's devDependencies but that shouldn't impact the final bundle.

    Did you run WebpackBundleAnalyzer and found a lodash dependency within the rxjs bundle ?

    Here is a snapshot of mine, as you can see, there is no lodash dependency in it: WebpackBundleAnalyzer rxjs dependency

    Second, It's normal you still have lodash in your final bundle since you're using it. The question is: What's in it? and what's it's size?

    Here is a snapshot of mine. As you can see I only import cloneDeep (import cloneDeep from 'lodash-es/cloneDeep';) so the size only is 69kb: WebpackBundleAnalyzer lodash dependency

    My dependencies :

    lodash-es 4.17.4

    rxjs 5.5.6