Import Cost Lite - Show Package Sizes Inline

Display the bundle size of imported npm packages directly in your editor. Supports ES6 imports, CommonJS require, and dynamic imports.

Features

• Inline size display — See package sizes right next to your import statements
• Color-coded warnings — Green (small), Yellow (medium), Red (large)
• Gzip estimates — Shows both raw and gzip-compressed sizes
• Zero config — Works out of the box with your node_modules
• 30+ known package sizes — Instant results for popular packages like React, Lodash, Axios
• Lightweight — No bundling required, reads from node_modules

Usage

Simply open any JavaScript or TypeScript file. Import sizes appear automatically as inline decorations.

Commands

• Import Cost Lite: Toggle Display — Enable/disable size decorations
• Import Cost Lite: Clear Size Cache — Clear the 24-hour size cache

Settings

Supported Syntax

import React from 'react'           // ES6 default
import { useState } from 'react'    // ES6 named
import 'normalize.css'               // ES6 side-effect
const express = require('express')   // CommonJS
const mod = await import('lodash')   // Dynamic import
import { PrismaClient } from '@prisma/client' // Scoped packages

License

MIT