npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

webpack-plugin-ramdisk

v0.2.0

Published

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

Downloads

65,195

Readme

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: diskPath β‡’ String 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)