• Stars
    star
    118
  • Rank 299,923 (Top 6 %)
  • Language
    JavaScript
  • License
    Mozilla Public Li...
  • Created over 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐏 A webpack plugin for blazing fast builds on a RAM disk / drive
webpack-plugin-ramdisk

tests cover size libera manifesto

webpack-plugin-ramdisk

🐏 A webpack plugin for blazing fast builds on a RAM disk / drive

Please consider donating if you find this project useful.

What It Does

This plugin will initialize and mount a RAM disk / drive to enable faster build emitting times. This has advantages over third-party in-memory filesystems in that it uses Node's fs module in conjunction with the local system's native capabilities. It's especially useful for projects which need to perform many successive builds, such as during development with Hot Module Reloading enabled. In an HMR scenario, this will also prevent excessive writes to Solid State Drives, preventing the shortening of the drive's lifespan.

Requirements

webpack-plugin-ramdisk is an evergreen 🌲 module.

This module requires an Active LTS Node version (v10.0.0+).

Install

Using npm:

npm install webpack-nano webpack-plugin-ramdisk --save-dev

Note: We recommend using webpack-nano, a very tiny, very clean webpack CLI.

Usage

When the plugin is applied during a webpack build, the output path specified for a compiler configuration is appended to the RAMdisk path. Be sure to choose an appropriate output path!

Create a webpack.config.js file:

const { WebpackPluginRamdisk } = require('webpack-plugin-ramdisk');
const options = { ... };

module.exports = {
	// an example entry definition
	output: {
		path: '/myapp/dist'  // ← important: this must be an absolute path!
  }
  ...
  plugins: [
    new WebpackPluginRamdisk(options)
  ]
};

And run webpack:

$ npx wp

You'll then see that build output has been written to the RAMdisk. In our example above on a MacOS computer, the output path would be /Volumes/wpr/myapp/dist.

Options

blockSize

Type: Number
Default: 512

Sets the block size used when allocating space for the RAMdisk.

bytes

Type: Number
Default: 2.56e8

Sets the physical size of the RAMdisk, in bytes. The default value is 256mb. Most builds won't require nearly that amount, and the value can be lowered. For extremely large builds, this value may be increased as needed.

name

Type: String
Default: wpr

Sets the name of the disk/drive/mount point for the RAMdisk. e.g. A value of batman would result in a disk root of /Volumes/batman on MacOS and /mnt/batman on Linux variants.

API

WebpackPluginRamdisk.cleanup(diskPath)

Parameters: diskPathString The mounted path of the RAMdisk to unmount and remove

Static. Provides a convenience method to unmount and remove a RAMdisk created with the plugin.

To remove the RAMdisk that the plugin created, first obtain the diskPath from the plugin:

const { WebpackPluginRamdisk } = require('webpack-plugin-ramdisk');
const plugin = new WebpackPluginRamdisk(options)
const { diskPath } = plugin;

WebpackPluginRamdisk.cleanup(diskPath);

Use Caution as specifying the wrong diskPath can have unintended consequences and cause a loss of data. The commands this method utilize can remove other drives as well.

Linux Users

Automatic creation of a RAMdisk requires administrative permissions. During the build process you'll be prompted by sudo to enter your credentials.

Windows Users

Windows users that have installed Windows Subsystem for Linux v2 can use the module without issue.

However, Windows users without WSL2 are in a pickle. Unfortunately Windows does not ship with any capabilities that allow for creation of RAM disks / drives programmatically, without user interaction. This is an OS limitation and we cannot work around it. However, there is a solution for Windows users - tools like ImDisk will allow you to create a RAMdisk and assign it a drive letter, to which one can point a webpack configuration's output property.

Performance

Average savings for a bundle's total build time ranges from 25-32% according to tests we've run on a variety of platforms and bundle sizes. The largest gains were during frequently Hot Module Reloading operations, where one or more files were changed and the bundle(s) were rebuilt during watch mode.

For example, the following stats were generated for a 13mb bundle:

Without webpack-plugin-ramdisk:

  • initial build and emit: 19.88s
  • initial file change, save, and rebuild: 0.6s
  • subsequent changes and rebuilds: 1.15s 0.864s 1.68s

Average build and emit time: 1.23s

With webpack-plugin-ramdisk:

  • initial build and emit: 16.8s
  • initial file change, save, and rebuild: 0.9s
  • subsequent changes and rebuilds: 1.23s, 0.951s, 0.48s

Average build and emit time: 0.887s

Result = 28% time savings. This may seem inconsequential, but consider the number of times a single developer will save and rebuild for HMR during the course of a workday. When aggregated, that's a considerable savings throughout a session.

Removing the RAMdisk

These commands use wpr as the RAMdisk name. If the name option has been modified, swap wpr for the value specified in the options.

On MacOS:

$ umount /Volumes/wpr
$ hdiutil detach /Volumes/wpr

On Linux:

$ sudo umount /mnt/wpr

Meta

CONTRIBUTING

LICENSE (Mozilla Public License)

More Repositories

1

webpack-manifest-plugin

webpack plugin for generating asset manifests
JavaScript
1,433
star
2

jsx-email

Build emails with a delightful DX
TypeScript
924
star
3

koa-webpack

Development and Hot Reload Middleware for Koa2
JavaScript
441
star
4

webpack-plugin-serve

A Development Server in a Webpack Plugin
JavaScript
337
star
5

webpack-nano

A teensy, squeaky 🐤 clean Webpack CLI
JavaScript
237
star
6

gmail-classic

CSS for reverting Gmail to the Classic Theme
CSS
216
star
7

postcss-less

PostCSS Syntax for parsing LESS
JavaScript
123
star
8

Gmail-Notifier-Plus

Gmail Notifier Plus
C#
89
star
9

prettier-plugin-package

An opinionated package.json formatter plugin for Prettier
JavaScript
81
star
10

mocha-chrome

☕ Run Mocha tests using headless Google Chrome
JavaScript
72
star
11

apollo-log

A logging extension for the Apollo GraphQL Server
TypeScript
66
star
12

postcss-values-parser

A CSS property value parser for PostCSS
JavaScript
58
star
13

webpack-serve

A CLI for webpack-plugin-serve, providing a premier webpack development server
JavaScript
51
star
14

loglevelnext

A modern logging library for Node.js that provides log level mapping to the console
TypeScript
38
star
15

OctoGerrit

A modern, clean, and usable theme for Gerrit
CSS
29
star
16

koa-ws

Empower your koa.js application with realtime
JavaScript
26
star
17

nanoid-cli

A tiny cli wrapper for nanoid
JavaScript
24
star
18

LiberaManifesto

A Manifesto for Open Source Software and Free Services
HTML
20
star
19

webpack-log

A logger for the Webpack ecosystem
JavaScript
18
star
20

doiuse-email

Lint HTML and CSS for email support against the `Can I email?` database.
TypeScript
14
star
21

Snarf

Snarf is an NFS server implementation written in C# with .NET 4.5.
C#
13
star
22

Brew

Brew is an open source library of interface components for ASP.NET which utilitizes jQuery and jQuery UI.
JavaScript
10
star
23

github-notifications-classic

A CSS project that restores the classic Github Notifications appearance.
CSS
9
star
24

Shellscape.Common

A .NET Library I use in a lot of my projects. Written in C#
C#
7
star
25

harmonica

A module that allows use of Node.js --harmony flags, programmatically.
JavaScript
7
star
26

webpack-hot-client

A client for enabling, and interacting with, webpack Hot Module Replacement
JavaScript
7
star
27

bundler-serve

A Platform for Bundler Development Servers
JavaScript
6
star
28

fwv

A ⚡️ crazy fast streaming ⚡️ Fixed Width Value Parser
JavaScript
5
star
29

gulp-scan

A Gulp plugin to scan a file for a particular string or expression
JavaScript
5
star
30

piilist

A list of Personally Identifiable Information keys / words / phrases used for redaction or removal
JavaScript
3
star
31

thank-you

A place for me to thank the outstanding people who support my work
3
star
32

Lumen

Everything that Start should have been.
C#
3
star
33

dot

Tools for monorepos, serverless, and more
TypeScript
2
star
34

shellscape.github.io

The codebase for shellscape.org
HTML
2
star
35

Gcal-Notifier-Plus

A Google Calendar Notifier for Windows 7
C#
2
star
36

gulp-assist

Display helpful information for your Gulp tasks
JavaScript
2
star
37

babel-plugin-async-to-plain-generator

Transform async functions into non-wrapped ES2015 generators
JavaScript
2
star
38

npm-version-tree

Fetch a dependency version tree for a package
JavaScript
2
star
39

Nubs

Fancy Tabs for the Windows Desktop
C#
1
star
40

travis-target

A Node.js module to determine the file or directory targets of a Travis CI build.
JavaScript
1
star
41

gulp-mocha-chrome

☕ Run Mocha tests using Google Chrome via Gulp
JavaScript
1
star
42

prettier-tree

Prettier directory trees
1
star
43

Rumshot

1
star
44

eslint-config-shellscape

ESLint shareable config for my projects
JavaScript
1
star
45

gulp-version-conflicts

Check for and report on module version conflicts for a package
JavaScript
1
star