Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jantimon/reproduction-nextjs-module-css-optimization
https://github.com/jantimon/reproduction-nextjs-module-css-optimization
Last synced: 28 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jantimon/reproduction-nextjs-module-css-optimization
- Owner: jantimon
- Created: 2024-02-28T10:36:59.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-02-28T14:45:59.000Z (8 months ago)
- Last Synced: 2024-04-15T01:09:31.044Z (7 months ago)
- Language: TypeScript
- Size: 29.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This uses the [Next.js](https://nextjs.org/) template to reporting a [bug in the Next.js repository](https://github.com/vercel/next.js/issues).
## Reproduction Steps
```bash
npm i
npm run build
```
```
Route (pages) Size First Load JS
┌ ○ / 780 B 78.9 kB
├ └ css/6ab5fea530a348de.css 367 B
└ ○ /404 182 B 78.3 kB
+ First Load JS shared by all 78.1 kB
├ chunks/framework-2c16ac744b6cdea6.js 45.2 kB
├ chunks/main-d7239acbfe0deb02.js 31.9 kB
└ other shared chunks (total) 945 B
○ (Static) prerendered as static content
```
## Patch
```bash
rm -rf .next
npm run patch
npm run build
```
```
Route (pages) Size First Load JS
┌ ○ / 682 B 78.7 kB
├ └ css/6ab5fea530a348de.css 367 B
└ ○ /404 182 B 78.2 kB
+ First Load JS shared by all 78 kB
├ chunks/framework-2c16ac744b6cdea6.js 45.2 kB
├ chunks/main-d7239acbfe0deb02.js 31.9 kB
└ other shared chunks (total) 907 B
○ (Static) prerendered as static content
```
As you can see, the size of the first load JS is reduced by ~100 bytes.
For a larger project, this would be more significant.
## Patch:
```diff
diff --git a/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js b/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
index e482b46..1b35d91 100644
--- a/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
+++ b/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
@@ -39,7 +39,7 @@ function getClientStyleLoader({ hasAppDir, isAppDir, isDevelopment, assetPrefix
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: `${assetPrefix}/_next/`,
- esModule: false
+ esModule: true
}
};
}
```