Nuxt Webpack Optimisations

Overview

The nuxt-webpack-optimisations module is a collection of webpack config changes that can help speed up build times and improve performance in Nuxt projects. By making optimizations and assumptions about the development environment, this module can reduce build times by up to 50% when cold and over 95% when hot. It is important to note that some of the optimizations are riskier and should only be used in development environments.

Features

• speed-measure-webpack-plugin: This tool measures the performance of the webpack build process.
• Nuxt config build.cache enabled: Enables caching in the Nuxt build process.
• Nuxt config build.parallel enabled: Enables parallel building in the Nuxt configuration.
• webpack's best practices for performance: Implements performance best practices recommended by webpack.
• esbuild replaces babel-loader: Uses the esbuild loader instead of babel-loader for improved performance.
• esbuild replaces ts-loader: Uses the esbuild loader instead of ts-loader for improved performance.
• postcss-preset-env is disabled: Disables postcss-preset-env for improved performance.
• file-loader replaces url-loader: Uses file-loader instead of url-loader for improved performance.
• Nuxt config build.hardsource enabled: Enables hardsource caching in the Nuxt configuration for improved performance.

Summary

The nuxt-webpack-optimisations module is a powerful tool for improving build times and performance in Nuxt projects. By making various optimizations and assumptions, this module can significantly reduce build times and improve the overall performance of your Nuxt applications. It is important to be cautious when using some of the riskier optimizations and to clear the cache if any issues arise. Overall, this module is a valuable addition to any Nuxt project seeking to maximize performance.