or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-tinyify

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

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/tinyify@4.0.x

To install, run

npx @tessl/cli install tessl/npm-tinyify@4.0.0

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:

unassertify: Removes assert() calls from code
@browserify/envify: Replaces environment variables (defaults NODE_ENV to "production")
@browserify/uglifyify: Performs dead code elimination
browser-pack-flat or bundle-collapser: Optimizes module loading (conditional)
common-shakeify: Removes unused exports from modules
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'));