spike-optimize v0.1.2
Spike Optimization Plugin
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
- Details on the license can be found here
- Details on running tests and contributing can be found here