diff --git a/README.md b/README.md index a778eae..c389c35 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,24 @@ # analyse +> [!WARNING] +> **webpack analyse is deprecated.** It is no longer maintained and will not +> gain new features. Use +> [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer) +> instead: it reads the same `stats.json`, runs as a webpack plugin or from the +> command line, and is where the work continues. The features this app has that +> bundle-analyzer does not yet are tracked in +> [webpack-bundle-analyzer#737](https://github.com/webpack/webpack-bundle-analyzer/issues/737). +> +> Moving over: +> +> ```bash +> npm install --save-dev webpack-bundle-analyzer +> npx webpack-bundle-analyzer stats.json +> ``` +> +> The site stays up and the repository stays open so existing links keep +> working, but expect fixes only for what breaks outright. + A browser-based dashboard for exploring webpack bundle statistics. It reads a webpack stats JSON file and visualizes modules, chunks, assets, warnings, errors, and optimization hints so you can understand bundle size and dependency structure. This project is a lightweight front-end viewer for webpack output generated with `--profile --json`. diff --git a/app/deprecation.pug b/app/deprecation.pug new file mode 100644 index 0000000..bf82753 --- /dev/null +++ b/app/deprecation.pug @@ -0,0 +1,7 @@ +//- Shown on every page: both application shells include it. Keep the wording +//- in step with the notice at the top of README.md. +.deprecation-banner(role="status") + strong webpack analyse is deprecated. + | It is no longer maintained and will not gain new features. Use + | #[a(href="https://github.com/webpack/webpack-bundle-analyzer", target="_blank", rel="noopener noreferrer") webpack-bundle-analyzer] + | instead — it reads the same stats file and is where the work continues. diff --git a/app/pages/select/application.pug b/app/pages/select/application.pug index aee0546..62e1b87 100644 --- a/app/pages/select/application.pug +++ b/app/pages/select/application.pug @@ -1,3 +1,4 @@ +include ../../deprecation.pug nav.navbar.navbar-default .container-fluid ul.nav.navbar-nav diff --git a/app/pages/upload/application.pug b/app/pages/upload/application.pug index 2200441..41af5f7 100644 --- a/app/pages/upload/application.pug +++ b/app/pages/upload/application.pug @@ -1,3 +1,4 @@ +include ../../deprecation.pug nav.navbar.navbar-default .container-fluid ul.nav.navbar-nav diff --git a/app/style.css b/app/style.css index 8de293b..8cda084 100644 --- a/app/style.css +++ b/app/style.css @@ -135,3 +135,16 @@ table pre { .module-filter-summary { color: #777; } + +/* Deprecation notice above the navbar, on every page. Bootstrap 3 has no + colour for "retired", so this borrows the warning palette a shade darker. */ +.deprecation-banner { + padding: 10px 15px; + border-bottom: 1px solid #f0c36d; + background: #fcf5d8; + color: #7a5b13; +} +.deprecation-banner a { + color: #7a5b13; + text-decoration: underline; +} diff --git a/test/deprecation.test.js b/test/deprecation.test.js new file mode 100644 index 0000000..cbd6517 --- /dev/null +++ b/test/deprecation.test.js @@ -0,0 +1,27 @@ +// The deprecation notice is the one thing every visitor has to see, and it +// lives in a partial two shells include. Run with `npm test`. +var test = require("node:test"); +var assert = require("node:assert"); +var path = require("node:path"); +var pug = require("pug"); + +var shells = { + upload: { file: "app/pages/upload/application.pug", locals: {} }, + select: { file: "app/pages/select/application.pug", locals: { children: [] } } +}; + +Object.keys(shells).forEach(function(name) { + test("the " + name + " shell carries the deprecation notice", function() { + var shell = shells[name]; + var html = pug.renderFile( + path.join(__dirname, "..", shell.file), + shell.locals + ); + assert.match(html, /webpack analyse is deprecated/); + assert.match( + html, + /https:\/\/github\.com\/webpack\/webpack-bundle-analyzer/, + "and points at what replaces it" + ); + }); +});