From d6a71e2f2a7265ecd4eea5ae3152bbc3bbbe7dd2 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 5 Aug 2022 11:00:59 +0100 Subject: [PATCH 1/2] perf(nuxt): remove CSS imports from page metadata --- packages/nuxt/src/pages/macros.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/nuxt/src/pages/macros.ts b/packages/nuxt/src/pages/macros.ts index 047ee23c3de..a15e9fea8a3 100644 --- a/packages/nuxt/src/pages/macros.ts +++ b/packages/nuxt/src/pages/macros.ts @@ -43,9 +43,18 @@ export const TransformMacroPlugin = createUnplugin((options: TransformMacroPlugi return result() } + const imports = findStaticImports(code) + + // Purge all imports bringing side effects, such as CSS imports + for (const entry of imports) { + if (!entry.imports) { + s.remove(entry.start, entry.end) + } + } + // [webpack] Re-export any imports from script blocks in the components // with workaround for vue-loader bug: https://github.com/vuejs/vue-loader/pull/1911 - const scriptImport = findStaticImports(code).find(i => parseQuery(i.specifier.replace('?macro=true', '')).type === 'script') + const scriptImport = imports.find(i => parseQuery(i.specifier.replace('?macro=true', '')).type === 'script') if (scriptImport) { // https://github.com/vuejs/vue-loader/pull/1911 // https://github.com/vitejs/vite/issues/8473 From d68f5ff0c9ab649615ba3f1d1f78da092e7e2962 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 5 Aug 2022 11:11:37 +0100 Subject: [PATCH 2/2] test: update css path --- test/basic.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/basic.test.ts b/test/basic.test.ts index 104330aa00c..897e12d0927 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -369,7 +369,7 @@ describe('dynamic paths', () => { const html = await $fetch('/assets') const urls = Array.from(html.matchAll(/(href|src)="(.*?)"/g)).map(m => m[2]) - const cssURL = urls.find(u => /_nuxt\/entry.*\.css$/.test(u)) + const cssURL = urls.find(u => /_nuxt\/assets.*\.css$/.test(u)) expect(cssURL).toBeDefined() const css = await $fetch(cssURL) const imageUrls = Array.from(css.matchAll(/url\(([^)]*)\)/g)).map(m => m[1].replace(/[-.][\w]{8}\./g, '.'))