0
# Tinyify
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: tinyify
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install --save-dev tinyify`
10
11
## Core Imports
12
13
```javascript
14
const tinyify = require('tinyify');
15
```
16
17
## Basic Usage
18
19
### CLI Usage
20
21
```bash
22
# Install tinyify
23
npm install --save-dev tinyify
24
25
# Use with browserify
26
browserify -p tinyify app.js
27
```
28
29
### API Usage
30
31
```javascript
32
const browserify = require('browserify');
33
34
// Basic usage with default options
35
browserify('app.js')
36
.plugin('tinyify')
37
.bundle()
38
.pipe(process.stdout);
39
40
// With custom options
41
browserify('app.js')
42
.plugin('tinyify', {
43
flat: false, // Disable browser-pack-flat
44
env: { // Custom environment variables
45
PUBLIC_PATH: 'https://mywebsite.surge.sh/'
46
}
47
})
48
.bundle()
49
.pipe(process.stdout);
50
```
51
52
## Architecture
53
54
Tinyify is built around a systematic optimization pipeline that applies the following transforms and plugins in order:
55
56
1. **unassertify**: Removes `assert()` calls from code
57
2. **@browserify/envify**: Replaces environment variables (defaults NODE_ENV to "production")
58
3. **@browserify/uglifyify**: Performs dead code elimination
59
4. **browser-pack-flat** or **bundle-collapser**: Optimizes module loading (conditional)
60
5. **common-shakeify**: Removes unused exports from modules
61
6. **minify-stream**: Final bundle minification using Terser
62
63
## Capabilities
64
65
### Main Plugin Function
66
67
The primary browserify plugin function that applies various optimization transforms to a browserify instance.
68
69
```javascript { .api }
70
/**
71
* Main tinyify plugin function - applies comprehensive optimization transforms
72
* @param {object} b - Browserify instance (required, must be object type)
73
* @param {object} [opts] - Optional configuration object
74
* @param {boolean} [opts.flat=true] - Enable browser-pack-flat for flat bundle output
75
* @param {object} [opts.env={}] - Custom environment variables for envify
76
* @throws {Error} If first parameter is not an object
77
*/
78
function tinyify(b, opts);
79
```
80
81
**Usage Examples:**
82
83
```javascript
84
const browserify = require('browserify');
85
86
// Default usage - applies all optimizations with flat bundling
87
browserify('app.js')
88
.plugin('tinyify')
89
.bundle();
90
91
// Disable flat bundling
92
browserify('app.js')
93
.plugin('tinyify', { flat: false })
94
.bundle();
95
96
// Custom environment variables
97
browserify('app.js')
98
.plugin('tinyify', {
99
env: {
100
API_URL: 'https://api.example.com',
101
DEBUG: 'false'
102
}
103
})
104
.bundle();
105
```
106
107
### Pipeline Application Function
108
109
Alternative API to apply tinyify transformations directly to a browserify pipeline, providing more granular control over the optimization process.
110
111
```javascript { .api }
112
/**
113
* Apply tinyify transformations directly to a browserify pipeline
114
* @param {object} pipeline - Browserify pipeline object
115
* @param {object} [opts] - Optional configuration object
116
* @param {boolean} [opts.flat=true] - Enable flat bundle output
117
* @param {boolean} [opts.debug=false] - Enable debug mode for source maps
118
* @param {string} [opts.basedir] - Base directory for pack-flat (defaults to process.cwd())
119
*/
120
function applyToPipeline(pipeline, opts);
121
```
122
123
**Usage Examples:**
124
125
```javascript
126
const tinyify = require('tinyify');
127
128
// Apply to existing pipeline with default options
129
tinyify.applyToPipeline(browserifyInstance.pipeline, { flat: true });
130
131
// Enable debug mode for development
132
tinyify.applyToPipeline(browserifyInstance.pipeline, {
133
flat: true,
134
debug: true,
135
basedir: __dirname
136
});
137
```
138
139
## Configuration Options
140
141
### Main Plugin Options
142
143
The main plugin function accepts an options object with the following properties:
144
145
```javascript { .api }
146
interface TinyifyOptions {
147
/** Enable browser-pack-flat for flat bundle output (default: true) */
148
flat?: boolean;
149
/** Custom environment variables merged with process.env and default NODE_ENV=production */
150
env?: Record<string, string>;
151
}
152
```
153
154
### Pipeline Options
155
156
The `applyToPipeline` function accepts additional configuration options:
157
158
```javascript { .api }
159
interface PipelineOptions {
160
/** Enable flat bundle output (default: true) */
161
flat?: boolean;
162
/** Enable debug mode for source maps (default: false) */
163
debug?: boolean;
164
/** Base directory for pack-flat (default: process.cwd()) */
165
basedir?: string;
166
}
167
```
168
169
## CLI Options
170
171
### Environment Variables
172
173
Supply custom environment variables using shell environment:
174
175
```bash
176
# Set custom environment variables
177
PUBLIC_PATH=https://mywebsite.surge.sh browserify app.js -p tinyify
178
```
179
180
### Disable Flat Bundling
181
182
```bash
183
# Use subarg syntax to disable flat bundling
184
browserify app.js -p [ tinyify --no-flat ]
185
```
186
187
## Optimization Details
188
189
### Included Optimizations
190
191
Tinyify automatically applies the following optimization tools:
192
193
- **unassertify**: Removes `assert()` calls for production builds
194
- **@browserify/envify**: Replaces `process.env.NODE_ENV` with "production" by default
195
- **@browserify/uglifyify**: Dead code elimination with Terser/UglifyJS
196
- **common-shakeify**: Tree shaking to remove unused exports
197
- **browser-pack-flat**: Generates flat bundles without function wrappers (when `flat: true`)
198
- **bundle-collapser**: Replaces file paths with short module IDs (when `flat: false`)
199
- **minify-stream**: Final bundle minification and compression
200
201
### Conditional Behavior
202
203
- **browser-pack-flat** vs **bundle-collapser**: Only one is used based on the `flat` option
204
- **Full paths mode**: When browserify's `--full-paths` option is used, both browser-pack-flat and bundle-collapser are disabled
205
- **Node.js version compatibility**: Automatically selects appropriate Terser version based on Node.js capabilities
206
207
## Error Handling
208
209
### Common Errors
210
211
```javascript { .api }
212
/**
213
* Error thrown when tinyify is used incorrectly
214
* @throws {Error} "tinyify: must be used as a plugin, not a transform"
215
*/
216
```
217
218
This error occurs when the first parameter to the main function is not an object (i.e., not a browserify instance).
219
220
## Alternative Manual Setup
221
222
For advanced customization beyond tinyify's options, you can install and configure the optimization tools individually:
223
224
```bash
225
npm install --save-dev unassertify @browserify/envify @browserify/uglifyify common-shakeify browser-pack-flat terser
226
227
browserify entry.js \
228
-g unassertify \
229
-g @browserify/envify \
230
-g @browserify/uglifyify \
231
-p common-shakeify \
232
-p browser-pack-flat/plugin \
233
| terser -cm \
234
> output.js
235
```
236
237
Or using the Node.js API:
238
239
```javascript
240
browserify('entry.js')
241
.transform('unassertify', { global: true })
242
.transform('@browserify/envify', { global: true })
243
.transform('@browserify/uglifyify', { global: true })
244
.plugin('common-shakeify')
245
.plugin('browser-pack-flat/plugin')
246
.bundle()
247
.pipe(require('minify-stream')({ sourceMap: false }))
248
.pipe(fs.createWriteStream('./output.js'));
249
```