Skip to content

Latest commit

 

History

History
81 lines (59 loc) · 4.09 KB

README.md

File metadata and controls

81 lines (59 loc) · 4.09 KB
Raw

Spike Optimization Plugin

npm tests dependencies coverage

A plugin that provides bleeding edge performance optimizations for spike.

Note: This project is in early development, and versioning is a little different. Read this for more details.

Installation

npm install spike-optimize -S

Usage

Currently, spike-optimize provides a simple interface through which you can enable scope hoisting, aggressive splitting for http/2, and hashed asset processing -- features that are on the more advanced side of webpack configuration, but which can be set up with simple boolean options through this plugin. For example:

const optimize = require('spike-optimize')

module.exports = {
  // ... your config ...
  afterSpikePlugins: [
    ...optimize({
      scopeHoisting: true,
      minify: true,
      aggressiveSplitting: true // or set your size limits ex. [30000, 50000]
    })
  ]
}

NOTE: Notice that optimize actually returns an array of plugins, so the instantiation is slightly different here.

Out of the box, this plugin will force webpack to use chunkhash naming optimized for long term cacheing. Now, as soon as you are using hash naming, you no longer have a way to include the scripts on your page, since they are named randomly. However, this plugin will scan your pages and detect when you are using the assets as they are named in your entries automatically, then replace them with the correct path. So you can still include the script like this:

<body>
  <!--  ... your code ... -->
  <script src='/js/main.js'></script>
</body>

Any scripts that webpack processes will be transformed such that the naming is correct if you are using hash naming, and if it has been split into multiple outputs, it will be replaced by multiple script tags. So for example, if you have aggressiveSplitting set to true, your result might look like this:

<body>
  <!--  ... your code ... -->
  <script src='/js/kj2b34k32b44nio.js'></script>
  <script src='/js/nro32uuwebfssdf.js'></script>
  <script src='/js/n23ouenwoubsfd3.js'></script>
</body>

In this case, your bundle has been split into a couple files to optimize http/2 load speed, and each file has been renamed to a hash. If you just use the plugin with default settings, it won't split your output and it will look more like this:

<body>
  <!--  ... your code ... -->
  <script src='/js/kj2b34k32b44nio.js'></script>
</body>

Note that at the moment, these optimizations are only available for javascript, not css. Aggressive splitting and hash naming could be marginally useful for css, and I will consider adding this in the future. In the meantime, PRs accepted!

Also note that this plugin will significantly slow down compilation due to the extra optimizations, and is only recommended to be used in production (but please test it locally before going live).

Options

Name Description Default
scopeHoisting Configures webpack to use scope hoisting.
aggressiveSplitting Configures webpack to use aggressive splitting for optimized h2.
minify Activates the uglifyjs plugin for minifying your js

License & Contributing