search

akanix42 / meteor-css-modules

MIT License
92 stars 19 forks source link

Extremely Slow build times #88

Closed RobAWilkinson closed 7 years ago

RobAWilkinson commented 7 years ago

I'm seeing extremely slow build times, my profile is below. It seems like css modules is the culprit:

| (#2) Profiling: Build App                  -
|  Starting your app                         -
| Build App...................................................102,009 ms (1)
| └─ files.withCache..........................................102,009 ms (1)
|    ├─ compiler.compile(the app)...............................9,635 ms (1)
|    │  └─ files.withCache......................................9,634 ms (2)
|    │     └─ compileUnibuild (the app).........................9,634 ms (2)
|    │        ├─ Isopack#ensurePluginsInitialized...............1,870 ms (40)
|    │        │  └─ JsImage#load................................1,866 ms (4)
|    │        │     ├─ runJavaScript packages/ecmascript-runtime.js 373 ms (2)
|    │        │     ├─ runJavaScript packages/babel-compiler.js...777 ms (2)
|    │        │     │  └─ Npm.require("meteor-babel")             775 ms (2)
|    │        │     └─ runJavaScript packages/mss_plugin.js       381 ms (1)
|    │        ├─ files.withCache..................................782 ms (2)
|    │        │  ├─ files.readdir                                 145 ms (4036)
|    │        │  └─ other files.withCache                         502 ms
|    │        ├─ files.readdir                                    212 ms (3983)
|    │        ├─ files.realpath                                   197 ms (3981)
|    │        ├─ files.stat                                       233 ms (30061)
|    │        ├─ files.readFile                                 4,028 ms (26077)
|    │        ├─ sha1                                             444 ms (26077)
|    │        └─ other compileUnibuild (the app)                1,767 ms
|    ├─ bundler.bundle..makeClientTarget.......................75,186 ms (1)
|    │  └─ Target#make.........................................75,185 ms (1)
|    │     ├─ Target#_runCompilerPlugins........................2,352 ms (1)
|    │     │  ├─ Isopack#ensurePluginsInitialized.................507 ms (442)
|    │     │  │  └─ JsImage#load..................................502 ms (1)
|    │     │  │     ├─ runJavaScript packages/ecmascript-runtime.js.115 ms (1)
|    │     │  │     │  └─ Npm.require("meteor-ecmascript-runtime") 114 ms (1)
|    │     │  │     └─ runJavaScript packages/CosmosBrowserify_plugin.js.288 ms (1)
|    │     │  │        └─ Npm.require("browserify")               254 ms (1)
|    │     │  ├─ plugin ecmascript..............................1,295 ms (1)
|    │     │  │  ├─ optimistic statOrNull.........................501 ms (3454)
|    │     │  │  │  └─ safeWatcher.watch                          418 ms (398)
|    │     │  │  ├─ Babel.compile                                 358 ms (484)
|    │     │  │  └─ other plugin ecmascript                       407 ms
|    │     │  ├─ plugin nathantreid:css-modules                   191 ms (1)
|    │     │  └─ other Target#_runCompilerPlugins                 218 ms
|    │     ├─ Target#_emitResources............................11,615 ms (1)
|    │     │  ├─ PackageSourceBatch.computeJsOutputFilesMap....10,969 ms (1)
|    │     │  │  ├─ ImportScanner#_findImportedModuleIdentifiers 5,712 ms (1487)
|    │     │  │  ├─ Resolver#_resolve...........................4,343 ms (1974)
|    │     │  │  │  ├─ Resolver#_resolveRelative..................505 ms (1974)
|    │     │  │  │  │  └─ Resolver#_joinAndStat...................500 ms (1240)
|    │     │  │  │  │     └─ optimistic statOrNull................466 ms (2219)
|    │     │  │  │  │        ├─ files.stat                        103 ms (1444)
|    │     │  │  │  │        ├─ safeWatcher.watch                 204 ms (376)
|    │     │  │  │  │        └─ other optimistic statOrNull       158 ms
|    │     │  │  │  ├─ Resolver#_resolveNodeModule..............3,674 ms (734)
|    │     │  │  │  │  └─ Resolver#_joinAndStat.................3,611 ms (3512)
|    │     │  │  │  │     ├─ optimistic statOrNull..............3,452 ms (15317)
|    │     │  │  │  │     │  ├─ safeWatcher.watch               1,834 ms (1683)
|    │     │  │  │  │     │  ├─ files.stat                        626 ms (9597)
|    │     │  │  │  │     │  └─ other optimistic statOrNull       911 ms
|    │     │  │  │  │     └─ other Resolver#_joinAndStat          159 ms
|    │     │  │  │  └─ Resolver#_resolvePkgJsonMain               122 ms (287)
|    │     │  │  ├─ ImportScanner#_readFile.......................462 ms (954)
|    │     │  │  │  ├─ optimistic readFile........................331 ms (954)
|    │     │  │  │  │  └─ files.readFile                          258 ms (954)
|    │     │  │  │  └─ optimistic hashOrNull                      105 ms (954)
|    │     │  │  └─ other PackageSourceBatch.computeJsOutputFilesMap 324 ms
|    │     │  └─ PackageSourceBatch#getResources..................630 ms (149)
|    │     │     └─ PackageSourceBatch#_linkJS....................626 ms (149)
|    │     │        ├─ files.readFile                             234 ms (149)
|    │     │        └─ other PackageSourceBatch#_linkJS           389 ms
|    │     └─ ClientTarget#minifyCss...........................61,069 ms (1)
|    │        ├─ mergeCss......................................60,954 ms (1)
|    │        │  ├─ CssTools.parseCss                          59,159 ms (120)
|    │        │  ├─ CssTools.mergeCssAsts.........................216 ms (1)
|    │        │  │  └─ CssTools.rewriteCssUrls                    200 ms (120)
|    │        │  ├─ CssTools.stringifyCss                         799 ms (1)
|    │        │  ├─ composing source maps                         504 ms (1)
|    │        │  └─ other mergeCss                                263 ms
|    │        └─ other ClientTarget#minifyCss                     115 ms
|    ├─ bundler.bundle..makeServerTarget........................2,455 ms (1)
|    │  └─ Target#make..........................................2,455 ms (1)
|    │     ├─ Target#_runCompilerPlugins..........................700 ms (1)
|    │     │  └─ plugin ecmascript................................617 ms (1)
|    │     │     ├─ optimistic statOrNull.........................251 ms (3222)
|    │     │     │  └─ safeWatcher.watch                          205 ms (176)
|    │     │     ├─ Babel.compile                                 139 ms (453)
|    │     │     └─ other plugin ecmascript                       210 ms
|    │     └─ Target#_emitResources.............................1,725 ms (1)
|    │        ├─ PackageSourceBatch.computeJsOutputFilesMap.....1,344 ms (1)
|    │        │  ├─ ImportScanner#_findImportedModuleIdentifiers  286 ms (382)
|    │        │  └─ Resolver#_resolve.............................958 ms (611)
|    │        │     ├─ Resolver#_resolveRelative..................219 ms (611)
|    │        │     │  └─ Resolver#_joinAndStat...................217 ms (436)
|    │        │     │     └─ optimistic statOrNull................210 ms (595)
|    │        │     │        └─ safeWatcher.watch                 179 ms (306)
|    │        │     └─ Resolver#_resolveNodeModule................713 ms (175)
|    │        │        └─ Resolver#_joinAndStat...................703 ms (749)
|    │        │           └─ optimistic statOrNull................685 ms (1984)
|    │        │              └─ safeWatcher.watch                 529 ms (451)
|    │        ├─ PackageSourceBatch#getResources..................155 ms (157)
|    │        │  └─ PackageSourceBatch#_linkJS                    148 ms (157)
|    │        └─ other Target#_emitResources                      227 ms
|    └─ bundler writeSiteArchive...............................14,694 ms (1)
|       ├─ bundler writeTargetToPath............................9,249 ms (2)
|       │  ├─ ClientTarget#write                                  275 ms (1)
|       │  └─ ServerTarget#write................................8,970 ms (1)
|       │     └─ JsImage#write..................................8,952 ms (1)
|       │        ├─ files.mkdir                                   160 ms (3155)
|       │        ├─ Builder#write...............................5,704 ms (18751)
|       │        │  ├─ Builder#_ensureDirectory                   319 ms (18751)
|       │        │  ├─ sha1                                       309 ms (18751)
|       │        │  ├─ files.writeFile                          2,422 ms (18751)
|       │        │  ├─ files.rename                             1,307 ms (18751)
|       │        │  └─ other Builder#write                      1,346 ms
|       │        ├─ sha1                                          409 ms (26069)
|       │        ├─ meteorNpm.isPortable..........................179 ms (27)
|       │        │  └─ meteorNpm.isPortable                       121 ms (673)
|       │        ├─ optimistic statOrNull.........................226 ms (1714)
|       │        │  └─ safeWatcher.watch                          117 ms (116)
|       │        └─ other JsImage#write                         2,165 ms
|       └─ Builder#complete.....................................5,411 ms (1)
|          └─ files.renameDirAlmostAtomically...................5,411 ms (1)
|             └─ files.rm_recursive                             5,411 ms (1)
|
| Top leaves:
| CssTools.parseCss.......................................59,159 ms (120)
| ImportScanner#_findImportedModuleIdentifiers.............5,998 ms (1869)
| files.rm_recursive.......................................5,415 ms (4)
| files.readFile...........................................4,765 ms (28629)
| files.writeFile..........................................2,508 ms (19010)
| other JsImage#write......................................2,165 ms (1)
| other compileUnibuild (the app)..........................1,767 ms (2)
| other Builder#write......................................1,346 ms (18751)
| other optimistic statOrNull..............................1,339 ms (28505)
| sha1.....................................................1,332 ms (75107)
| files.stat...............................................1,327 ms (55388)
| files.rename.............................................1,327 ms (19016)
| CssTools.stringifyCss......................................799 ms (1)
| other plugin ecmascript....................................617 ms (2)
| other files.withCache......................................532 ms (5)
| composing source maps......................................504 ms (1)
| other PackageSourceBatch.computeJsOutputFilesMap...........395 ms (2)
| other PackageSourceBatch#_linkJS...........................389 ms (149)
| files.readdir..............................................359 ms (8050)
| Builder#_ensureDirectory...................................321 ms (19007)
| files.realpath.............................................277 ms (6026)
| other Target#_runCompilerPlugins...........................275 ms (2)
| other mergeCss.............................................263 ms (1)
| other Target#_emitResources................................243 ms (2)
| other Resolver#_joinAndStat................................218 ms (5937)
| CssTools.rewriteCssUrls....................................200 ms (120)
| files.mkdir................................................162 ms (3202)
| ImportScanner#_getInstallPath..............................119 ms (2629)
| other ClientTarget#minifyCss...............................115 ms (1)
| files.lstat................................................109 ms (1826)
|
| (#2) Total: 102,009 ms (Build App)
|
akanix42 commented 7 years ago

This doesn't look like a CSS modules issue to me - the build plugin is only taking 191 ms: | │ │ ├─ plugin nathantreid:css-modules 191 ms It looks like most of your time is being spent here, in the Meteor CSS bundler/minifier: | │ └─ ClientTarget#minifyCss...........................61,069 ms (1) What version of Meteor are you running? CSS minification has been sped up greatly in the 1.4 releases.

RobAWilkinson commented 7 years ago

.meteor/release METEOR@1.4.2.3

This is a pretty big project, is there a chance it is parsing css thats not imported in node_modules folder?

akanix42 commented 7 years ago

Yes, Meteor will automatically pull in all .css files. If you are using this package to handle .css files, then you can ignore all the files under node_modules using the "ignorePaths" option in your package.json (see the Wiki for more info). Here's an example to ignore the whole node_modules folder:

"cssModules": {
  "ignorePaths": [
    "node_modules"
  ]
}

Meteor will still scan for those files and watch them for changes (that's out of our control) but they'll be excluded from the compilation process, so they won't get passed on to the minifier.

RobAWilkinson commented 7 years ago

adding node_modules fixed this, awesome