CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tinyify

A browserify plugin that runs various optimizations, so you don't have to install them all manually

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Tinyify

Tinyify is a comprehensive browserify plugin that provides automated bundle optimization by combining multiple optimization tools into a single, easy-to-use package. It integrates essential optimization transforms and plugins to minimize bundle size and optimize JavaScript applications for production deployment.

Package Information

  • Package Name: tinyify
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev tinyify

Core Imports

const tinyify = require('tinyify');

Basic Usage

CLI Usage

# Install tinyify
npm install --save-dev tinyify

# Use with browserify
browserify -p tinyify app.js

API Usage

const browserify = require('browserify');

// Basic usage with default options
browserify('app.js')
  .plugin('tinyify')
  .bundle()
  .pipe(process.stdout);

// With custom options
browserify('app.js')
  .plugin('tinyify', {
    flat: false,  // Disable browser-pack-flat
    env: {        // Custom environment variables
      PUBLIC_PATH: 'https://mywebsite.surge.sh/'
    }
  })
  .bundle()
  .pipe(process.stdout);

Architecture

Tinyify is built around a systematic optimization pipeline that applies the following transforms and plugins in order:

  1. unassertify: Removes assert() calls from code
  2. @browserify/envify: Replaces environment variables (defaults NODE_ENV to "production")
  3. @browserify/uglifyify: Performs dead code elimination
  4. browser-pack-flat or bundle-collapser: Optimizes module loading (conditional)
  5. common-shakeify: Removes unused exports from modules
  6. minify-stream: Final bundle minification using Terser

Capabilities

Main Plugin Function

The primary browserify plugin function that applies various optimization transforms to a browserify instance.

/**
 * Main tinyify plugin function - applies comprehensive optimization transforms
 * @param {object} b - Browserify instance (required, must be object type)
 * @param {object} [opts] - Optional configuration object
 * @param {boolean} [opts.flat=true] - Enable browser-pack-flat for flat bundle output
 * @param {object} [opts.env={}] - Custom environment variables for envify
 * @throws {Error} If first parameter is not an object
 */
function tinyify(b, opts);

Usage Examples:

const browserify = require('browserify');

// Default usage - applies all optimizations with flat bundling
browserify('app.js')
  .plugin('tinyify')
  .bundle();

// Disable flat bundling
browserify('app.js')
  .plugin('tinyify', { flat: false })
  .bundle();

// Custom environment variables
browserify('app.js')
  .plugin('tinyify', {
    env: {
      API_URL: 'https://api.example.com',
      DEBUG: 'false'
    }
  })
  .bundle();

Pipeline Application Function

Alternative API to apply tinyify transformations directly to a browserify pipeline, providing more granular control over the optimization process.

/**
 * Apply tinyify transformations directly to a browserify pipeline
 * @param {object} pipeline - Browserify pipeline object
 * @param {object} [opts] - Optional configuration object
 * @param {boolean} [opts.flat=true] - Enable flat bundle output
 * @param {boolean} [opts.debug=false] - Enable debug mode for source maps
 * @param {string} [opts.basedir] - Base directory for pack-flat (defaults to process.cwd())
 */
function applyToPipeline(pipeline, opts);

Usage Examples:

const tinyify = require('tinyify');

// Apply to existing pipeline with default options
tinyify.applyToPipeline(browserifyInstance.pipeline, { flat: true });

// Enable debug mode for development
tinyify.applyToPipeline(browserifyInstance.pipeline, {
  flat: true,
  debug: true,
  basedir: __dirname
});

Configuration Options

Main Plugin Options

The main plugin function accepts an options object with the following properties:

interface TinyifyOptions {
  /** Enable browser-pack-flat for flat bundle output (default: true) */
  flat?: boolean;
  /** Custom environment variables merged with process.env and default NODE_ENV=production */
  env?: Record<string, string>;
}

Pipeline Options

The applyToPipeline function accepts additional configuration options:

interface PipelineOptions {
  /** Enable flat bundle output (default: true) */
  flat?: boolean;
  /** Enable debug mode for source maps (default: false) */
  debug?: boolean;
  /** Base directory for pack-flat (default: process.cwd()) */
  basedir?: string;
}

CLI Options

Environment Variables

Supply custom environment variables using shell environment:

# Set custom environment variables
PUBLIC_PATH=https://mywebsite.surge.sh browserify app.js -p tinyify

Disable Flat Bundling

# Use subarg syntax to disable flat bundling
browserify app.js -p [ tinyify --no-flat ]

Optimization Details

Included Optimizations

Tinyify automatically applies the following optimization tools:

  • unassertify: Removes assert() calls for production builds
  • @browserify/envify: Replaces process.env.NODE_ENV with "production" by default
  • @browserify/uglifyify: Dead code elimination with Terser/UglifyJS
  • common-shakeify: Tree shaking to remove unused exports
  • browser-pack-flat: Generates flat bundles without function wrappers (when flat: true)
  • bundle-collapser: Replaces file paths with short module IDs (when flat: false)
  • minify-stream: Final bundle minification and compression

Conditional Behavior

  • browser-pack-flat vs bundle-collapser: Only one is used based on the flat option
  • Full paths mode: When browserify's --full-paths option is used, both browser-pack-flat and bundle-collapser are disabled
  • Node.js version compatibility: Automatically selects appropriate Terser version based on Node.js capabilities

Error Handling

Common Errors

/**
 * Error thrown when tinyify is used incorrectly
 * @throws {Error} "tinyify: must be used as a plugin, not a transform"
 */

This error occurs when the first parameter to the main function is not an object (i.e., not a browserify instance).

Alternative Manual Setup

For advanced customization beyond tinyify's options, you can install and configure the optimization tools individually:

npm install --save-dev unassertify @browserify/envify @browserify/uglifyify common-shakeify browser-pack-flat terser

browserify entry.js \
  -g unassertify \
  -g @browserify/envify \
  -g @browserify/uglifyify \
  -p common-shakeify \
  -p browser-pack-flat/plugin \
| terser -cm \
> output.js

Or using the Node.js API:

browserify('entry.js')
  .transform('unassertify', { global: true })
  .transform('@browserify/envify', { global: true })
  .transform('@browserify/uglifyify', { global: true })
  .plugin('common-shakeify')
  .plugin('browser-pack-flat/plugin')
  .bundle()
  .pipe(require('minify-stream')({ sourceMap: false }))
  .pipe(fs.createWriteStream('./output.js'));
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tinyify@4.0.x
Publish Source
CLI
Badge
tessl/npm-tinyify badge