Bundle-blaster NPM

`bundle-blaster` ·

A build plugin to help you bundle icons without huge bundle sizes (seamlessly integrates with any icon pack)

Installation

npm install bundle-blaster

How does Bundle Blaster work?

Bundle Blaster works by selecting by turning your general icon imports into specific imports. For example, if you have a general import like this:

import { Icon1, Icon2, Icon3 } from 'icon-pack'; // Lots of MBs if no tree shaking

Bundle Blaster will turn this into:

// <KBs with tree shaking
import Icon1 from 'icon-pack/Icon1';
import Icon2 from 'icon-pack/Icon2';
import Icon3 from 'icon-pack/Icon3';

Usage

Integrating Bundle Blaster into your project is easy. Simply add the following to your next.config.js file:

next.config.js

import bundleBlaster from 'bundle-blaster';

// ...
const config = {
  // ...
  webpack: (config) => {
    // ...
    config.plugins.push(
      bundleBlaster.webpack({
        sources: ['icon-pack'],
        nextjs: true,
      }),
    );
    return config;
  },
};
// ...

If you're not using Next.js or Webpack, bundle-blaster also exports plugins for Vite, Rollup, ESBuild, and RSPack:

import { webpack, vite, rollup, esbuild, rspack } from 'bundle-blaster';

// Example with Vite:
const vitePlugin = vite({
  sources: ['icon-pack'],
});

Options

`sources`

Example: ['icon-pack', 'another-icon-pack']

The sources to bundle blast. This is an array of strings that represent the packages you want to bundle blast.

`alias`

Example: { 'icon-pack': 'path/to/icon-pack' }

The alias to use to resolve a specific package (think @rollup/plugin-alias). This is useful if you use a monorepo and have a package aliased to a different location.

`nextjs`

Example: true/false

The nextjs option is used to determine if you are using nextjs. If you are using Next.js, you can set this to true and Bundle Blaster will automatically resolve to dynamic importing instead of static (code splitting wins!).