From 2332272ae1d14ba204b05157b8599b96c3d095c4 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Wed, 7 Dec 2022 21:28:10 +0100 Subject: [PATCH] Do not attach CSS checksum for production build (#43827) The flight CSS dev loader only does one thing: adding a checksum string to the module exports to make sure the content hash updates during development (so we can trigger HMR properly). This loader is not needed for production builds. This PR makes sure that the checksum isn't attached and shipped to the client: CleanShot 2022-12-07 at 20 49 30@2x Which is 0.25kB for that testing page. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- .../loaders/next-flight-css-dev-loader.ts | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts index 8bfd62b9f38f189..43f994e35b423b7 100644 --- a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts +++ b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts @@ -5,25 +5,32 @@ */ export function pitch(this: any) { - const content = this.fs.readFileSync(this.resourcePath) - this.data.__checksum = ( - typeof content === 'string' ? Buffer.from(content) : content - ).toString('hex') + if (process.env.NODE_ENV !== 'production') { + const content = this.fs.readFileSync(this.resourcePath) + this.data.__checksum = ( + typeof content === 'string' ? Buffer.from(content) : content + ).toString('hex') + } } const NextServerCSSLoader = function (this: any, content: string) { this.cacheable && this.cacheable() - const isCSSModule = this.resourcePath.match(/\.module\.(css|sass|scss)$/) - if (isCSSModule) { - return ( - content + - '\nmodule.exports.__checksum = ' + - JSON.stringify(this.data.__checksum) - ) + // Only add the checksum during development. + if (process.env.NODE_ENV !== 'production') { + const isCSSModule = this.resourcePath.match(/\.module\.(css|sass|scss)$/) + if (isCSSModule) { + return ( + content + + '\nmodule.exports.__checksum = ' + + JSON.stringify(this.data.__checksum) + ) + } + + return `export default ${JSON.stringify(this.data.__checksum)}` } - return `export default ${JSON.stringify(this.data.__checksum)}` + return content } export default NextServerCSSLoader