{"id":15287128,"url":"https://github.com/harlan-zw/nuxt-webpack-optimisations","last_synced_at":"2025-10-24T11:56:02.591Z","repository":{"id":44429321,"uuid":"337066468","full_name":"harlan-zw/nuxt-webpack-optimisations","owner":"harlan-zw","description":"Make your Nuxt.js webpack builds faster ⚡","archived":false,"fork":false,"pushed_at":"2025-03-28T00:09:29.000Z","size":5689,"stargazers_count":271,"open_issues_count":7,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-04T12:57:24.009Z","etag":null,"topics":["nuxt","nuxt-module","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/harlan-zw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["harlan-zw"]}},"created_at":"2021-02-08T12:19:34.000Z","updated_at":"2025-01-17T11:18:59.000Z","dependencies_parsed_at":"2024-06-19T00:15:21.699Z","dependency_job_id":"bc7bd415-4ad1-4635-9279-9eaa67d057e6","html_url":"https://github.com/harlan-zw/nuxt-webpack-optimisations","commit_stats":{"total_commits":150,"total_committers":7,"mean_commits":"21.428571428571427","dds":"0.040000000000000036","last_synced_commit":"770afd3348ad294aa1f59f0dbfcedd243aa5c399"},"previous_names":["harlan-zw/nuxt-build-optimisations"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harlan-zw%2Fnuxt-webpack-optimisations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harlan-zw%2Fnuxt-webpack-optimisations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harlan-zw%2Fnuxt-webpack-optimisations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harlan-zw%2Fnuxt-webpack-optimisations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harlan-zw","download_url":"https://codeload.github.com/harlan-zw/nuxt-webpack-optimisations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248457146,"owners_count":21106844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","webpack"],"created_at":"2024-09-30T15:24:23.466Z","updated_at":"2025-10-24T11:56:02.499Z","avatar_url":"https://github.com/harlan-zw.png","language":"TypeScript","funding_links":["https://github.com/sponsors/harlan-zw"],"categories":[],"sub_categories":[],"readme":"![](https://repository-images.githubusercontent.com/337066468/8a3e8e34-3d48-4f0f-bb07-b02e4391f53c)\n\n\u003cp align='center'\u003e\n\u003ca href='https://www.npmjs.com/package/nuxt-webpack-optimisations'\u003e\n\u003cimg src='https://img.shields.io/npm/v/nuxt-webpack-optimisations?color=0EA5E9\u0026label='\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/nuxt-webpack-optimisations\" target=\"__blank\"\u003e\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/nuxt-webpack-optimisations?color=0EA5E9\u0026label=\"\u003e\u003c/a\u003e\n\u003ca href='https://github.com/harlan-zw/nuxt-webpack-optimisations/actions/workflows/test.yml'\u003e\n\u003cimg src='https://github.com/harlan-zw/nuxt-webpack-optimisations/actions/workflows/test.yml/badge.svg' \u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003eWebpack Build Time Optimisations for Nuxt.js! ⚡️\u003cbr\u003e\n\u003csup\u003e\u003cem\u003eInstantly speed up your Nuxt.js webpack build time.\u003c/em\u003e\u003c/sup\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width=\"2000\" height=\"0\" /\u003e\u003cbr\u003e\n\u003ci\u003eStatus:\u003c/i\u003e \u003cb\u003eStable v2 ✅ , bridge ✅, v3 ⚠️\u003c/b\u003e\u003cbr\u003e\n\u003csub\u003eMade possible by my \u003ca href=\"https://github.com/sponsors/harlan-zw\"\u003eSponsor Program 💖\u003c/a\u003e\u003cbr\u003e Follow me \u003ca href=\"https://twitter.com/harlan_zw\"\u003e@harlan_zw\u003c/a\u003e 🐦\u003c/sub\u003e\u003cbr\u003e\n\u003cimg width=\"2000\" height=\"0\" /\u003e\n\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/p\u003e\n\n\u003e Previously: \"nuxt-build-optimisations\", see \u003ca href=\"https://github.com/harlan-zw/nuxt-webpack-optimisations/releases/tag/2.0.0\"\u003emigration notes\u003c/a\u003e.\n\n### Can't use Vite with Nuxt yet?\n\n\u003e i.e  [Nuxt Vite](https://vite.nuxtjs.org/) or  [Nuxt 3](https://v3.nuxtjs.org/)\n\nTruly sad... But I do have some good news. While you won't be able to achieve\ninstant app starts anytime soon, `nuxt-webpack-optimisations` can get things snappy again.\n\n## Webpack Optimisations\n\n`nuxt-webpack-optimisations` is a collection of webpack config changes that will let you speed up your build times and audit them.\n\nBy making smarter and riskier assumptions on how you want to run your environment in development, this module has been benchmarked\nto reduce your build time by **~50% when cold ☃** , **~95%+ when hot 🔥** (using hardsource).\n\n### How risky are we talking\n\nThe riskier optimisations are enabled only on development and relate to over caching, which is always easy to fix with a good old `rm -rf node_modules/.cache` 💩.\n\n✔️ This module has been tested to cause no issues in production environments.\n\n## Features\n\nFeatures are enabled by their risk profile. The risk profile is the likelihood of issues coming up.\n\n**Tools**\n\n- [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)\n\n\n**Always**\n- Nuxt config [build.cache](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#cache) enabled\n- Nuxt config [build.parallel](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#parallel) enabled  - _requires `risky: true`_\n- webpacks [best practices](https://webpack.js.org/guides/build-performance/)  for performance\n\n**Dev**\n- [esbuild](https://esbuild.github.io/) replaces `babel-loader`\n- [esbuild](https://esbuild.github.io/) replaces `ts-loader` \n- [postcss-preset-env](https://github.com/csstools/postcss-preset-env) is disabled\n- `file-loader` replaces `url-loader`\n- Nuxt config [build.hardsource](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#hardsource) enabled - _requires `risky: true`_\n\n**Production**\n- [esbuild](https://esbuild.github.io/) replaces [Terser](https://github.com/terser/terser) for minification \n\n\n### Compatibility\n\n- ✔️ Nuxt v2\n- ✔️ Nuxt bridge\n- ⚠ Nuxt v3 _Note: Vite needs to be disabled. You probably don't need this module._\n\n\n## Setup\n\nInstall the module.\n\n```bash\nyarn add -D nuxt-webpack-optimisations\n# npm i -D nuxt-webpack-optimisations\n```\n\nWithin your `nuxt.config.ts` or `nuxt.config.js`\n```js\nbuildModules: [\n  'nuxt-webpack-optimisations',\n],\n```\n\n### Typescript\n\nFor Nuxt config typescript support, add the module within your `tsconfig.json`.\n\n```json\n\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"nuxt-webpack-optimisations\"\n    ]\n  }\n}\n```\n\n\n---\n\n## Usage\n\nAll non-risky features are enabled by default, only `hardsource` and `parallel` are disabled.\n\nIf you'd like to get more performance than the default you can try\n\n```js\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    features: {\n      // enable risky optimisations in dev only\n      hardSourcePlugin: process.env.NODE_ENV === 'development',\n      parallelPlugin: process.env.NODE_ENV === 'development',\n    }\n  }\n}\n```\n\nNote: It's recommended to avoid running risky in non-development environments. Caching in CI environments can lead to issues.\n\n### Modifying Esbuild Behaviour\n\nOut of the box the esbuild optimisations will use the default options, only changing the target for earlier browsers\nto support legacy code. \n\nIn most cases you won't need to change this, if you do then you'll need to configure the client, server and modern (if using) build separately.\n\nExample:\n\n```js\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    // https://github.com/privatenumber/esbuild-loader#%EF%B8%8F-options\n    esbuildLoaderOptions: {\n      client: {\n        // any esbuild options can be set here\n        minifyIdentifiers: false,\n        // as well as any esbuild-loader options\n        target: 'es2015',\n      },\n      server: {\n        minifyIdentifiers: false,\n        target: 'node14',\n      },\n      // only needed if you're using modern: true\n      modern: {\n        target: 'es2017',\n      },\n    }\n  }\n}\n```\n\n### Something isn't working\n\nA lot of the speed improvements are from heavy caching, if you have any issues the first thing you should\ndo is clear your cache.\n\n```shell\n# Linux / Mac\nrm -rf node_modules/.cache\n\n# windows\nrd /s  \"node_modules/.cache\"\n```\n\nIf you'd like to see what features are running you can enable the debug mode.\n\n```js\n// nuxt.config.ts\nexport default {\n  webpackOptimisations: {\n    debug: true\n  }\n}\n```\n\n\n## Configuration\n\n\n### Features\n\n*Type:*  `object`\n\n*Default:* Non-risky features enabled.\n\nYou can disable features if you'd like to skip optimisations.\n\n\n```js\n// nuxt.config.ts\nexport default {\n  webpackOptimisations: {\n    features: {\n      // Note: just an example of keys, these are all keys and their default\n      postcssNoPolyfills: true,\n      esbuildLoader: true,\n      esbuildMinifier: true,\n      imageFileLoader: true,\n      webpackOptimisations: true,\n      cacheLoader: true,\n      hardSourcePlugin: false,\n      parallelPlugin: false,\n    }\n  }\n}\n```\n\n### esbuildLoaderOptions\n\n*Type:*  `object`\n\n*Default:*\n```javascript\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    // https://github.com/privatenumber/esbuild-loader#%EF%B8%8F-options\n    esbuildLoaderOptions: {\n      client: {\n        target: 'es2015',\n      },\n      server: {\n        target: 'node14',\n      },\n      modern: {\n        target: 'es2015',\n      },\n    }\n  }\n}\n```\n\nSee [esbuild-loader](https://github.com/privatenumber/esbuild-loader#%EF%B8%8F-options) for full options.\n\n### esbuildMinifyOptions\n\n*Type:*  `object`\n\n*Default:*\n```javascript\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    // https://github.com/privatenumber/esbuild-loader#minifyplugin\n    esbuildMinifyOptions: {\n      client: {\n        target: 'es2015',\n      },\n      server: {\n        target: 'node14',\n      },\n      modern: {\n        target: 'es2015',\n      },\n    }\n  },\n}\n```\n\nSee [esbuild-loader](https://github.com/privatenumber/esbuild-loader#minifyplugin) for full options.\n\n### Measure\n\n*Type:* `boolean` or `object`\n\n*Default:* `false`\n\nWhen measure is enabled with true (options or environment variable), it will use the `speed-measure-webpack-plugin`.\n\nIf the measure option is an object it is assumed to be [speed-measure-webpack-plugin options](https://github.com/stephencookdev/speed-measure-webpack-plugin#options).\n\n```js\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    measure: {\n      outputFormat: 'humanVerbose',\n      granularLoaderData: true,\n      loaderTopFiles: 10\n    }\n  }\n}\n```\n\nYou can use an environment variable to enable the measure as well.\n\n**package.json**\n\n```json\n{\n  \"scripts\": {\n    \"measure\": \"export NUXT_MEASURE=true; nuxt dev\"\n  }\n}\n```\n\nNote: Some features are disabled with measure on, such as caching.\n\n### Measure Mode\n\n*Type:* `client` | `server` | `modern` | `all`\n\n*Default:* `client`\n\nConfigure which build will be measured. Note that non-client builds may be buggy and mess with HMR.\n\n```javascript\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    measureMode: 'all'\n  }\n}\n```\n\n### Gotchas\n\n#### Vue Property Decorator / Vue Class Component\n\nYour babel-loader will be replaced with esbuild, which doesn't support class decorators in js.\n\nYou can either migrate your scripts to typescript or disabled the esbuild loader.\n\n**Disable Loader**\n```js\n// nuxt.config.ts\nexport default {\n  // ...\n  webpackOptimisations: {\n    features: {\n      esbuildLoader: false\n    }\n  }\n}\n```\n\n**Migrate to TypeScript**\n\n*tsconfig.json*\n```json\n{\n  \"experimentalDecorators\": true\n}\n```\n\n```vue\n\u003cscript lang=\"ts\"\u003e\nimport Vue from 'vue'\nimport Component from 'vue-class-component'\n\n@Component\nexport default class HelloWorld extends Vue {\n  data () {\n    return {\n      hello: 'test'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Credits\n\n- https://github.com/galvez/nuxt-esbuild-module\n- https://github.com/privatenumber/esbuild-loader\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\nMIT License © 2022 [Harlan Wilton](https://github.com/harlan-zw)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharlan-zw%2Fnuxt-webpack-optimisations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharlan-zw%2Fnuxt-webpack-optimisations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharlan-zw%2Fnuxt-webpack-optimisations/lists"}