
nuxt-build-optimisations
Instantly speed up your Nuxt.js 2 dev build time.
Why and how fast?
Nuxt.js is fast but is limited by its webpack build, when your app grows things slow down.
Nuxt build optimisations abstracts the complexities of optimising your Nuxt.js app so anyone can instantly speed up their builds
without having to learn webpack. The focus is primarily on the development build, as the optimisations are safer.
Benchmarks
Development: :snowman: 2-5x quicker cold starts, :fire: almost instant hot starts (with "risky" profile)
Production: Should be a slight performance improvement depending on profile.
Features
The features are separated by their risk profile, how likely they are to cause issues within your app.
Safe
Experimental
Risky
Setup
Install using yarn or npm. (Nuxt.js 2.10+ is required)
yarn add nuxt-build-optimisations
- :warning: This package makes optimisations with the assumption you're developing on the latest chrome.
- Note: Nuxt 3 will use Vite which will most likely make this package redundant in the future.
Usage
Within your nuxt.config.js
add the following.
buildModules: [
'nuxt-build-optimisations',
],
It's recommended you start with the risky profile and see if it works.
buildOptimisations: {
profile: 'risky'
},
A lot of the speed improvements are from heavy caching, if you have any issues the first thing you should
do is clear your cache.
rm -rf node_modules/.cache
Configuration
Profile
Type: risky
| experimental
| safe
| false
Default: experimental
If you have errors on any mode you should increment down in profiles until you find one that works.
Setting the profile to false will disable the optimisations, useful when you want to measure your build time without optimisations.
Measure
Type: boolean
or object
Default: false
When measure is enabled with true (options or environment variable), it will use the speed-measure-webpack-plugin
.
If the measure option is an object it is assumed to be speed-measure-webpack-plugin options.
buildOptimisations: {
measure: {
outputFormat: 'humanVerbose',
granularLoaderData: true,
loaderTopFiles: 10
}
}
You can use an environment variable to enable the measure as well.
package.json
{
"scripts": {
"measure": "export NUXT_MEASURE=true; nuxt dev"
}
}
Note: Some features are disabled with measure on, such as caching.
Measure Mode
Type: client
| server
| modern
| all
Default: client
Configure which build will be measured. Note that non-client builds may be buggy and mess with HMR.
buildOptimisations: {
measureMode: 'all'
}
Features
Type: object
Default:
esbuildLoader: true
esbuildMinifier: true
imageFileLoader: true
webpackOptimisations: true
postcssNoPolyfills: true
cacheLoader: boolean
hardSourcePlugin: boolean
You can disable features if you'd like to skip optimisations.
buildOptimisations: {
features: {
// use url-loader
imageFileLoader: false
}
}
esbuildLoaderOptions
Type: object
or (args) => object
Default:
{
target: 'es2015'
}
See (esbuild-loader)[https://github.com/privatenumber/esbuild-loader].
esbuildMinifyOptions
Type: object
or (args) => object
Default:
{
target: 'es2015'
}
See (esbuild-loader)[https://github.com/privatenumber/esbuild-loader].
Credits
License
MIT