Question

决定在我的Angular 4项目中使用部分lodash导入，类似于：

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

eveything看起来不错，直到我决定用WebpackBundleAnalyzer检查捆绑包细节。并发现整个lodash仍在那里！经过对依赖项的小规模调查后，我意识到rx.js在其依赖项中有lodash

有没有人有经验如何从项目中删除整个lodash，如果它包含rx.js？请分享你的经验。

这是我的部分package.json文件：

{
  "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"
  },

}

Answer 1

首先，我不认为rxjs在其依赖项中有lodash。它在它的devDependencies中有lodash，但这不应该影响最终的包。

您是否运行过WebpackBundleAnalyzer并在rxjs包中找到了lodash依赖项？

这是我的快照，你可以看到，它没有lodash依赖：

其次，你正在使用它的最终捆绑中仍然有lodash是正常的。问题是：它里面有什么？什么是它的大小？

这是我的快照。如您所见，我只导入cloneDeep（从'lodash-es / cloneDeep';导入cloneDeep），因此大小仅为69kb：

我的依赖项：

lodash-es 4.17.4

rxjs 5.5.6

在项目中导入rx.js时，摆脱整个lodash依赖关系

1 个答案: