webpack-module-timing-plugin

Find the slowest files in your webpack build.

webpack-module-timing-plugin gives you a terminal-first timing report that answers:

• Which source files are expensive to compile?
• Is the time going into module build, optimize, or emit?
• In a Vue SFC, is the slowdown in template, script, or style?

It reports:

• The slowest files in the current build
• A phase summary for module build, optimize, and emit work
• Vue SFC part timings for template, script, and style

Quick Start

npm install --save-dev webpack-module-timing-plugin

const WebpackModuleTimingPlugin = require('webpack-module-timing-plugin')

module.exports = {
  plugins: [
    new WebpackModuleTimingPlugin(),
  ],
}

At A Glance

• File-level timing reports for webpack builds
• Vue SFC timing breakdowns out of the box
• Helpful for both initial builds and incremental rebuilds
• Lightweight output that fits directly in the terminal

Why This Plugin

Many webpack performance tools focus on the whole build, individual loaders, or bundle size.

This plugin focuses on a different question:

Which source files are the slowest to compile right now?

That makes it useful when you are trying to:

• Find a handful of expensive files in a large app
• Understand whether a slow Vue file is heavy in template, script, or style
• Compare first build and incremental rebuild hotspots
• Give teammates a simple terminal report without extra dashboards

Features

• Per-file timing ranking
• Optional Vue SFC part breakdown
• Build phase summary
• Works with webpack 4 and webpack 5
• Zero runtime dependencies

Install

npm install --save-dev webpack-module-timing-plugin

Repository

• Homepage: https://github.com/EricBoum/webpack-module-timing-plugin
• Issues: https://github.com/EricBoum/webpack-module-timing-plugin/issues

Usage

const WebpackModuleTimingPlugin = require('webpack-module-timing-plugin')

module.exports = {
  plugins: [
    new WebpackModuleTimingPlugin({
      topN: 20,
      filter: /[\\/]src[\\/]/,
      showParts: true,
      showEntries: false,
    }),
  ],
}

Common Use Cases

• Investigating a suddenly slow local rebuild after a feature branch grows
• Finding which Vue page or shared component is dominating compile time
• Spot-checking whether a build slowdown comes from source transforms or later webpack phases
• Sharing a low-friction build performance signal with the team during optimization work

What It Measures

• Module build time, grouped by source file
• A build phase summary using webpack compiler hooks
• Vue SFC child module timings derived from vue-loader resource queries

What It Does Not Measure

• Exact loader-by-loader timing
• Bundle size or output chunk analysis
• A perfect wall-clock profiler for every internal webpack step

The report is designed to be actionable and lightweight, not a full tracing system.

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | topN | number | 15 | Show the slowest N files. | | filter | RegExp \| (resource) => boolean | /[\\/]src[\\/]/ | Limit tracked files. | | showParts | boolean | true | Show per-part details below each file. | | showEntries | boolean | false | Show Vue entry aggregation rows without adding them to total time. | | barWidth | number | 24 | Width of the timing bars. | | context | string | process.cwd() | Base directory used for relative paths. | | colors | boolean | true | Enable ANSI colors in terminal output. | | writer | (report, payload) => void | console.log | Custom output hook. |

showAll is also accepted as a backward-compatible alias of showEntries.

Example Output

┌────────────────────────────────────────────────────────────────────────┐
│  Webpack Module Timing  [initial build]  total: 8.34s  files: 12
├────────────────────────────────────────────────────────────────────────┤
│  Build phases
│  module build          ██████████████        5.28s
│  seal / optimize       ███                   1.06s
│  emit                  ██                    612ms
├────────────────────────────────────────────────────────────────────────┤
│  rank  file                                                total
├────────────────────────────────────────────────────────────────────────┤
│  #1    src/pages/home/index.vue                           1.42s
│       ├── template  ██████████████                         673ms
│       ├── script    ███████                                411ms
│       └── style     ███                                    192ms
└────────────────────────────────────────────────────────────────────────┘

When To Use It

• Your webpack build feels slow, but the normal output is too coarse
• You want file-level timing without introducing a heavy profiling workflow
• Your project uses Vue SFCs and you want to see whether the bottleneck lives in template, script, or style

Changelog

See CHANGELOG.md.

Release Checklist

Before publishing:

1. Verify the package name is still available on npm.
2. Bump version in package.json.
3. Add CI for npm test.
4. Publish with npm publish --access public.

License

MIT