node_modules黑洞分析工具 - nmls

node_modules 黑洞歷史

  • npm安裝模塊一開始是樹狀結構,依賴的依賴都放到各自的node_modules目錄下面,這樣一個複雜一點項目安裝完依賴,node_modules目錄動不動就上G的大小。
  • 後來npm支持了扁平結構,但一旦遇到版本衝突,也就是依賴相同的模塊但版本各不一樣,這樣的依賴依舊會安裝到各自的node_modules目錄下,仍是會有樹狀結構。
  • 因此node_modules就像黑洞同樣,深不見底。有時候由於路徑太長,系統都沒法刪除此類文件。

node_modules模塊大小分析工具 - nmls

cli全局安裝模式vue

npm install nmls -g
複製代碼

而後進入項目根目錄直接運行nmls命令進行分析node

C:\workspace\nmls-test>nmls
[nmls] path: .
WARN: Fail to read file: ./.gitignore
[nmls] generated root module: nmls-test
[nmls] generated all node modules
┌───────────────────────────────────┬─────────┬──────────┬────────────┬────────────┬────────────┐
│                                   │         │   Module │     Module │ Dependency │ Dependency │
│  Name                             │ Version │    Files │       Size │      Files │       Size │
├───────────────────────────────────┼─────────┼──────────┼────────────┼────────────┼────────────┤
│ └ nmls-test                       │ 1.0.0   │        0 │        0 B │      14613 │   66.26 MB │
│   ├ dependencies                  │         │          │            │            │            │
│   │ ├ angular                     │ 1.7.8   │       10 │    1.99 MB │          0 │        0 B │
│   │ ├ bootstrap                   │ 4.3.1   │      152 │    4.17 MB │          0 │        0 B │
│   │ ├ handlebars                  │ 4.3.3   │      107 │    2.32 MB │        239 │    2.71 MB │
│   │ ├ jquery                      │ 3.4.1   │      125 │    1.24 MB │          0 │        0 B │
│   │ ├ koa                         │ 2.8.2   │        8 │   78.99 KB │        265 │  709.52 KB │
│   │ ├ vue                         │ 2.6.10  │      222 │    2.84 MB │          0 │        0 B │
│   │ └ vue-router                  │ 3.1.3   │       17 │  379.19 KB │          0 │        0 B │
│   └ devDependencies               │         │          │            │            │            │
│     ├ babel-loader                │ 8.0.6   │        9 │   36.95 KB │        153 │  422.15 KB │
│     ├ eslint                      │ 6.4.0   │      386 │    2.66 MB │       5718 │   13.51 MB │
│     ├ multi-process-worker        │ 1.0.4   │        3 │   18.84 KB │          6 │   31.08 KB │
│     ├ puppeteer-chromium-resolver │ 2.0.1   │        5 │   18.15 KB │        505 │    2.18 MB │
│     ├ stylelint                   │ 11.0.0  │      538 │    1.34 MB │       4882 │   16.62 MB │
│     ├ vue-cli                     │ 2.9.6   │       52 │   55.79 KB │       7054 │   20.58 MB │
│     └ webpack                     │ 4.41.0  │      357 │    1.39 MB │       2670 │   16.13 MB │
└───────────────────────────────────┴─────────┴──────────┴────────────┴────────────┴────────────┘
複製代碼
  • dependencies和devDependencies的模塊都會列出來,版本,模塊文件數和大小,模塊依賴的文件數和大小
  • 模塊依賴大小之和並不會等於項目依賴的總大小,由於有不少依賴的依賴都是重複的
  • 若是發現某些模塊特別大,能夠考慮替換成輕量級的模塊進行減負

分析指定模塊的信息

好比指定分析vue-cli的依賴信息jquery

E:\workspace\nmls-test>nmls -m vue-cli
[nmls] path: .
WARN: Fail to read file: ./.gitignore
[nmls] generated root module: nmls-test
[nmls] generated all node modules
[nmls] generated module: vue-cli
┌─────────────────────────────────┬─────────┬──────────┬────────────┬────────────┬────────────┐
│                                 │         │   Module │     Module │ Dependency │ Dependency │
│  Name                           │ Version │    Files │       Size │      Files │       Size │
├─────────────────────────────────┼─────────┼──────────┼────────────┼────────────┼────────────┤
│ └ vue-cli                       │ 2.9.6   │       52 │   55.79 KB │       7054 │   20.58 MB │
│   └ dependencies                │         │          │            │            │            │
│     ├ async                     │ 2.6.3   │      133 │  529.14 KB │       1049 │    1.34 MB │
│     ├ chalk                     │ 2.4.2   │        7 │   27.39 KB │         31 │   62.92 KB │
│     ├ coffee-script             │ 1.12.7  │       23 │  389.47 KB │          0 │        0 B │
│     ├ commander                 │ 2.20.0  │        6 │   61.71 KB │          0 │        0 B │
│     ├ consolidate               │ 0.14.5  │        9 │   46.77 KB │         45 │  608.95 KB │
│     ├ download-git-repo         │ 1.1.0   │       48 │   16.53 KB │        525 │    1.33 MB │
│     ├ handlebars                │ 4.3.3   │      107 │    2.32 MB │        239 │    2.71 MB │
│     ├ inquirer                  │ 6.5.2   │       25 │   77.03 KB │       4870 │    6.97 MB │
│     ├ metalsmith                │ 2.3.0   │       11 │   35.17 KB │        436 │     1.9 MB │
│     ├ minimatch                 │ 3.0.4   │        4 │   33.31 KB │         16 │   24.71 KB │
│     ├ multimatch                │ 2.1.0   │        4 │    5.23 KB │         35 │   71.37 KB │
│     ├ ora                       │ 1.4.0   │        4 │    9.79 KB │         70 │  135.32 KB │
│     ├ read-metadata             │ 1.0.0   │       11 │    4.74 KB │         38 │  486.77 KB │
│     ├ request                   │ 2.88.0  │       17 │  202.91 KB │        575 │    3.64 MB │
│     ├ rimraf                    │ 2.7.1   │        5 │   16.09 KB │         53 │  149.88 KB │
│     ├ semver                    │ 5.7.1   │        7 │   61.07 KB │          0 │        0 B │
│     ├ tildify                   │ 1.2.0   │        4 │     3.5 KB │          4 │    4.03 KB │
│     ├ uid                       │ 0.0.2   │        9 │    2.82 KB │          0 │        0 B │
│     ├ user-home                 │ 2.0.0   │        4 │    3.51 KB │          4 │    4.03 KB │
│     └ validate-npm-package-name │ 3.0.0   │        9 │   21.39 KB │          7 │    3.58 KB │
└─────────────────────────────────┴─────────┴──────────┴────────────┴────────────┴────────────┘
複製代碼

CLI工具集成nmls

若是你的cli工具須要nmls分析工具,也能夠進行集成webpack

npm install nmls
複製代碼

例子git

var NMLS = require("nmls");
var path = ".";
var nmls = new NMLS(path);
var option = {
    sort: "dSize",
    asc: false,
    external: "devDependencies",
    module: ""
};
nmls.start(option).then(() => {
    console.log("[nmls] done");
});
複製代碼

nmls項目地址

github.com/cenfun/nmlsgithub

相關文章
相關標籤/搜索