Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: inline dynamic imports for ssr-webworker (fixes #9385) #9401

Merged
merged 4 commits into from Jul 28, 2022
Merged

fix: inline dynamic imports for ssr-webworker (fixes #9385) #9401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a5f597
test: ssr-webworker should inline dynamic imports
sapphi-red Jul 28, 2022
7c011b4
fix: ssr-webworker should inline dynamic imports
sapphi-red Jul 28, 2022
2a2cc35
test: fix test
sapphi-red Jul 28, 2022
78b6b9c
test: restore guard
sapphi-red Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/vite/src/node/build.ts
View file
Open in desktop
Expand Up @@ -444,11 +444,13 @@ async function doBuild(
)
}

const ssrWorkerBuild = ssr && config.ssr?.target !== 'webworker'
const cjsSsrBuild = ssr && config.ssr?.format === 'cjs'
const ssrNodeBuild = ssr && config.ssr.target === 'node'
const ssrWorkerBuild = ssr && config.ssr.target === 'webworker'
const cjsSsrBuild = ssr && config.ssr.format === 'cjs'

const format = output.format || (cjsSsrBuild ? 'cjs' : 'es')
const jsExt =
ssrWorkerBuild || libOptions
ssrNodeBuild || libOptions
? resolveOutputJsExtension(format, getPkgJson(config.root)?.type)
: 'js'
return {
Expand Down
5 changes: 3 additions & 2 deletions playground/ssr-vue/vite.config.js
View file
Open in desktop
Expand Up @@ -85,14 +85,15 @@ export default defineConfig(({ command, ssrBuild }) => ({
}
},
transform(code, id) {
const cleanId = cleanUrl(id)
if (
config.build.ssr &&
cleanUrl(id).endsWith('.js') &&
(cleanId.endsWith('.js') || cleanId.endsWith('.vue')) &&
!code.includes('__ssr_vue_processAssetPath')
) {
return {
code:
`import { __ssr_vue_processAssetPath } from '${virtualId}';` +
`import { __ssr_vue_processAssetPath } from '${virtualId}';__ssr_vue_processAssetPath;` +
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed? And why the guard against importing it twice has been removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why this is needed. But if I remove this, assets/Home.hash.js won't include the import.

About the guard, it was an artifact during struggling about that. 😅 Thanks for pointing it out!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe moduleSideEffects: 'no-treeshake' means the module is side-effectful but the imports can be removed if not used?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would think that should be respected, but we could move with your change for the moment until we find out a better way.

code,
sourcemap: null // no sourcemap support to speed up CI
}
Expand Down
7 changes: 6 additions & 1 deletion playground/ssr-webworker/__tests__/ssr-webworker.spec.ts
View file
Open in desktop
@@ -1,5 +1,5 @@
import { port } from './serve'
import { page } from '~utils'
import { findAssetFile, isBuild, page } from '~utils'

const url = `http://localhost:${port}`

Expand All @@ -9,3 +9,8 @@ test('/', async () => {
expect(await page.textContent('.linked')).toMatch('dep from upper directory')
expect(await page.textContent('.external')).toMatch('object')
})

test.runIf(isBuild)('inlineDynamicImports', () => {
const dynamicJsContent = findAssetFile(/dynamic\.\w+\.js/, 'worker')
expect(dynamicJsContent).toBe('')
})
1 change: 1 addition & 0 deletions playground/ssr-webworker/src/dynamic.js
View file
Open in desktop
@@ -0,0 +1 @@
export const foo = 'foo'
4 changes: 4 additions & 0 deletions playground/ssr-webworker/src/entry-worker.jsx
View file
Open in desktop
@@ -1,6 +1,10 @@
import { msg as linkedMsg } from 'resolve-linked'
import React from 'react'

import('./dynamic').then(({ foo }) => {
console.log(foo)
})

addEventListener('fetch', function (event) {
return event.respondWith(
new Response(
Expand Down
13 changes: 10 additions & 3 deletions playground/test-utils.ts
View file
Open in desktop
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/triple-slash-reference */
// test utils used in e2e tests for playgrounds.
// `import { getColor } from '~utils'`

Expand All @@ -8,7 +7,7 @@
import fs from 'node:fs'
import path from 'node:path'
import colors from 'css-color-names'
import type { ElementHandle, ConsoleMessage } from 'playwright-chromium'
import type { ConsoleMessage, ElementHandle } from 'playwright-chromium'
import type { Manifest } from 'vite'
import { normalizePath } from 'vite'
import { fromComment } from 'convert-source-map'
Expand Down Expand Up @@ -128,7 +127,15 @@ export function findAssetFile(
assets = 'assets'
): string {
const assetsDir = path.join(testDir, 'dist', base, assets)
const files = fs.readdirSync(assetsDir)
let files: string[]
try {
files = fs.readdirSync(assetsDir)
} catch (e) {
if (e.code === 'ENOENT') {
return ''
}
throw e
}
const file = files.find((file) => {
return file.match(match)
})
Expand Down