feat(gatsby): add webpack-logging plugin to Gatsby for debugging

[wardpeet]

Description

Added a new webpack plugin to Gatsby to add webpack logging and timings information.

You can enable it by setting GATSBY_WEBPACK_LOGGING to "query-engine", "page-engine", "build-javascript", "build-html", "develop" or "develop-html". Multiple values can be set as well using a comma delimiter. (ex GATSBY_WEBPACK_LOGGING="build-javascript,build-html")

The webpack plugin enables some configuration and adds a ton of logs:

• enables infrastructure logging
• enables profile
• enables webpack-bundle-analyzer when installed in the root

Logging

<i> [webpack.Progress]  |  | 28 ms before run > WebpackLogging
<i> [webpack.Progress]  | 30 ms setup > before run
<i> [webpack.Progress]  | 11 ms setup > compilation
⠧ Building production JavaScript and CSS bundles
<w> [webpack.Progress]  | 9620 ms building > entries dependencies modules
<w> [webpack.Progress] 9626 ms building
<i> [webpack.Progress]  | 21 ms sealing > asset processing
assets by status 1.38 MiB [cached] 65 assets
Entrypoint polyfill 84.5 KiB (212 KiB) = webpack-runtime-dfdef06b24050bd8a2de.js 3.97 KiB polyfill-e47e48d229f84aa71e52.js 80.6 KiB 2     
auxiliary assets
Entrypoint app 216 KiB (1.69 MiB) = webpack-runtime-dfdef06b24050bd8a2de.js 3.97 KiB framework-195c5a45ccc0b0805ce0.js 127 KiB
styles.51799c192fa25789803b.css 16.7 KiB app-15e608b37a0d5c3d2dd6.js 68.1 KiB 55 auxiliary assets
cached modules 533 KiB (javascript) 26 KiB (css/mini-extract) 9.2 KiB (runtime) [cached] 158 modules

LOG from webpack.Compiler
<t> make hook: 9621.649 ms
<t> finish make hook: 0.2956 ms
<t> finish compilation: 9.0597 ms
<t> seal compilation: 79.1439 ms
<t> afterCompile hook: 0.1343 ms
<t> emitAssets: 5.8931 ms
<t> emitRecords: 0.004 ms

LOG from webpack.Compilation.ModuleProfile
<e>  | 4786 ms (parallelism 2) resolve to new modules > ./.cache/polyfill-entry.js
<e>  | 4785 ms (parallelism 2) resolve to new modules > ./.cache/production-app.js
<e> 9591 ms resolve to new modules

LOG from webpack.Compilation
<t> finish module profiles: 4.2673 ms
<t> finish modules: 4.0286 ms
<t> report dependency errors and warnings: 0.7343 ms
<t> optimize dependencies: 6.2449 ms
<t> create chunks: 3.6639 ms
<t> optimize: 25.2096 ms
    71 modules hashed (0.49 variants per module in average)
<t> module hashing: 5.5336 ms
    0% code generated (0 generated, 71 from cache)
<t> code generation: 0.9635 ms
<t> runtime requirements: 3.7322 ms
<t> hashing: initialize hash: 0.0029 ms
<t> hashing: sort chunks: 0.061 ms
<t> hashing: hash runtime modules: 6.0049 ms
<t> hashing: hash chunks: 2.2289 ms
<t> hashing: hash digest: 0.0259 ms
<t> hashing: process full hash modules: 0.0016 ms
<t> hashing: 8.9901 ms
    0% code generated (0 generated, 14 from cache)
<t> record hash: 0.2357 ms
<t> module assets: 0.5688 ms
<t> create chunk assets: 1.1397 ms
<t> process assets: 21.2608 ms

LOG from webpack.ResolverCachePlugin
    0% really resolved (0 real resolves with 0 cached but invalid, 451 cached valid, 0 concurrent)

LOG from webpack.FlagDependencyExportsPlugin
<t> restore cached provided exports: 0.908 ms
<t> figure out provided exports: 1.4556 ms
    23% of exports of modules have been determined (23 no declared exports, 33 not cached, 0 flagged uncacheable, 88 from cache, 1        
additional calculations due to dependencies)
<t> store provided exports into cache: 0.0046 ms

LOG from webpack.SideEffectsFlagPlugin
<t> update dependencies: 0.6707 ms

LOG from webpack.FlagDependencyUsagePlugin
<t> initialize exports usage: 0.4198 ms
<t> trace exports usage in graph: 3.8554 ms

LOG from webpack.buildChunkGraph
<t> visitModules: prepare: 0.7653 ms
<t> visitModules: visiting: 1.0108 ms
<t> visitModules: calculating available modules: 0.1638 ms
<t> visitModules: merging available modules: 0.2509 ms
<t> visitModules: check modules for revisit: 0.1089 ms
<t> visitModules: visiting: 0.1836 ms
    321 queue items processed (161 blocks)
    8 chunk groups connected
    8 chunk groups processed for merging (8 module sets, 0 forked, 0 + 0 modules forked, 0 + 0 modules merged into fork, 0 resulting      
modules)
    8 chunk group info updated (0 already connected chunk groups reconnected)
<t> visitModules: 2.5292 ms
<t> connectChunkGroups: 0.1562 ms
<t> cleanup: 0.0032 ms

LOG from webpack.SplitChunksPlugin
<t> prepare: 0.0263 ms
<t> modules: 1.899 ms
<t> queue: 0.4981 ms
<t> maxSize: 0.0236 ms

LOG from webpack.ModuleConcatenationPlugin
<t> select relevant modules: 0.4283 ms
<t> sort relevant modules: 0.0599 ms
<t> find modules to concatenate: 3.9002 ms
<t> sort concat configurations: 0.0262 ms
<t> create concatenated modules: 2.7223 ms
+ 3 hidden lines

LOG from webpack.FileSystemInfo
    0 new snapshots created
    64% root snapshot uncached (377 / 590)
    9% children snapshot uncached (56 / 597)
    1152 entries tested
    File info in cache: 108 timestamps 5 hashes 0 timestamp hash combinations
    Directory info in cache: 0 timestamps 0 hashes 0 timestamp hash combinations
    Managed items info in cache: 255 items

build-javascript (webpack 5.51.1) compiled successfully in 9761 ms
⠇ Building production JavaScript and CSS bundles
Webpack Bundle Analyzer saved report to C:\Users\Ward\projects\gatsby\tmp\starter-blog-ssr\public\report.html
⠇ Building production JavaScript and CSS bundles
<i> [webpack.Progress]  |  | 238 ms plugins > webpack-bundle-analyzer
<i> [webpack.Progress]  | 280 ms done > plugins

Documentation

It's more internal than anything else

Related Issues