FrontEnd-Ops Resources

Bundle analysis

  • webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
  • source-map-explorer - Analyze and debug space usage through source maps
  • bundle-stats - Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, rollup and vite.
  • Statoscope - Statoscope is a toolkit to analyze and validate webpack bundle
  • rsdoctor - A one-stop build analyzer for Rspack and Webpack.
  • gradejs - GradeJS analyzes production Webpack bundles without having access to the source code of a website. Instantly see vulnerabilities, outdated packages, and more just by entering a web application URL.
  • Bundle Buddy - A tool to understand your bundle size and why files are in your bundle
  • nextjs-bundle-analysis - A github action that provides detailed bundle analysis on PRs for next.js apps
  • inspectpack - An inspection tool for Webpack frontend JavaScript bundles.

Bundle size

  • Size Limit - Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit
  • compressed-size-action - GitHub Action that adds compressed size changes to your PRs.
  • BundleSize - Keep your bundle size in check

Dependency analysis and management

  • Bundle Phobia
  • knip - Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it!
  • Skott - All-in-one devtool to automatically analyze, search and visualize dependencies from JavaScript, TypeScript (JSX/TSX) and Node.js (ES6, CommonJS)
  • Wireit - Wireit upgrades your npm/pnpm/yarn scripts to make them smarter and more efficient.
  • verdaccio - A lightweight Node.js private proxy registry
  • yarn-deduplicate - Deduplication tool for yarn.lock files
  • dependency-cruiser - Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

Resources

Articles

Ship performant web applications with confidence every single time. Analyze, fix, and optimize your bundle before shipping to production.