feat(plugin-legacy): add option to output only legacy builds

[lsdsjy]

Description

Fixes #9050

Additional context

This PR is a continuation of #9458 and adopts @sapphi-red 's suggestion. By controlling rollupOptions.output, the plugin skips modern bundle generating at all, which

1. is faster;
2. skips the unnecessary CSS generation. There's no need to generate separate .css files and <link> tags because legacy chunks will inline CSS text.

Besides, I have changed the option's name to renderModernChunks, which is easier to understand considering the existing renderLegacyChunks option.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Tal500]

2. skips the unnecessary CSS generation. There's no need to generate separate `.css` files and `<link>` tags because [legacy chunks will inline CSS text](https://github.com/vitejs/vite/blob/8f315a20a7c3a33c72e7993860b6b69f5d6f0e05/packages/vite/src/node/plugins/css.ts#L570-L583).

Please notice my PR #9920 that basically omits entirely CSS inlining for legacy, and instead (pre)load the same CSS chunks both for modern and legacy.

[patak-dev]

@lsdsjy sorry for the delay to review this PR. I've added it to our team board to be discussed in a future team meeting. Would you comment on your use case for this feature? Are you targeting a specific browser inside a private setup that can't be upgraded I imagine? If this is a public app, most users will benefit from our current default scheme.

To give visibility, there is a forked plugin in case this is needed before: npmjs.com/package/vite-plugin-legacy-no-module

[lsdsjy]

Are you targeting a specific browser inside a private setup that can't be upgraded I imagine?

Yes. It's hard to explain though. It's important for us that the zipped archive of all dist files is small while still compatible with legacy devices, so we can't afford to have an extra set of dist files for modern devices.

To give visibility, there is a forked plugin in case this is needed before: npmjs.com/package/vite-plugin-legacy-no-module

I see. This PR had changes with vite core to enforce CSS inlining, so it was not feasible to only use a plugin. But thanks to #10496, a forked plugin can be a temporary workaround now. And I've reverted a99eade in my PR accordingly.

[Tal500]

Are you targeting a specific browser inside a private setup that can't be upgraded I imagine?

Yes. It's hard to explain though. It's important for us that the zipped archive of all dist files is small while still compatible with legacy devices, so we can't afford to have an extra set of dist files for modern devices.

To give visibility, there is a forked plugin in case this is needed before: npmjs.com/package/vite-plugin-legacy-no-module

I see. This PR had changes with vite core to enforce CSS inlining, so it was not feasible to only use a plugin. But thanks to #10496, a forked plugin can be a temporary workaround now. And I've reverted a99eade in my PR accordingly.

As a workaround, I can tell you that you can just delete all the output chunk files that doesn't ends up with -legacy.js.
Additionally, if you're prerendering the pages(or willing to introduce a middleware), you can remove the <script type="module" parts from HTML, and also remove the nomodule attribute from the `<script> tags, the same as done for Vite legacy automated tests:

vite/playground/legacy/vite.config.js

Lines 33 to 43 in 934a304

	// special test only hook
	// for tests, remove `<script type="module">` tags and remove `nomodule`
	// attrs so that we run the legacy bundle instead.
	__test__() {
	const indexPath = path.resolve(__dirname, './dist/index.html')
	let index = fs.readFileSync(indexPath, 'utf-8')
	index = index
	.replace(/<script type="module".*?<\/script>/g, '')
	.replace(/<script nomodule/g, '<script')
	fs.writeFileSync(indexPath, index)
	}

[patak-dev]

Yes, @Tal500 has a point too. I don't know if we can justify the option just to speed up a bit plugin legacy here if there is a good way to remove the files after you build. We'll be discussing it in a future team meeting to see what is the best. The linked issues have several folks doing +1 to it, so maybe an option is indeed justified.

[lsdsjy]

As a workaround, I can tell you that you can just delete all the output chunk files that doesn't ends up with -legacy.js. Additionally, if you're prerendering the pages(or willing to introduce a middleware), you can remove the <script type="module" parts from HTML, and also remove the nomodule attribute from the `<script> tags, the same as done for Vite legacy automated tests:

vite/playground/legacy/vite.config.js

Lines 33 to 43 in 934a304

	// special test only hook
	// for tests, remove `<script type="module">` tags and remove `nomodule`
	// attrs so that we run the legacy bundle instead.
	__test__() {
	const indexPath = path.resolve(__dirname, './dist/index.html')
	let index = fs.readFileSync(indexPath, 'utf-8')
	index = index
	.replace(/<script type="module".*?<\/script>/g, '')
	.replace(/<script nomodule/g, '<script')
	fs.writeFileSync(indexPath, index)
	}

Yes, it's basically what the prior work in #9458 does, while there's a little waste of computation.
So yes we have several workarounds, but it's better if we can integrate this into vite.

[aleen42]

any progress about this feature?

[patak-dev]

Hey @aleen42, when there is progress in a PR or issue, we always comment on them so there is no need to ask that question (here or on other open-source projects)

In particular, this issue is in the backlog on our Team board, but we haven't had time to check it out yet.

[sapphi-red]

LGTM

[zArubaru]

@sapphi-red Once check is dead!

[Kingwl]

💥💥💥

[sangquangnguyen]

Hi @lsdsjy @Kingwl , could you try this feature yet? I used
legacy({ renderModernChunks: false }) then I will have the entry point index-legacy-123456.js in manifest.json, but when I used it, I will encounter the issue System is not defined, do you know this issue?
<script type="module" src="base_url/index-legacy-123456.js" />

[dante01yoon]

System is not defined

Same here, how can fix System is not defined

[sangquangnguyen]

System is not defined

Same here, how can fix System is not defined

I found out the reason, I saw in manifest.json we have vite/legacy-polyfills-legacy file, we have to include this polyfill-legacy file into the script before the entry point to load all necessary polyfills. Hope that helps you @dante01yoon 👍

[dante01yoon]

System is not defined

Same here, how can fix System is not defined

I found out the reason, I saw in manifest.json we have vite/legacy-polyfills-legacy file, we have to include this polyfill-legacy file into the script before the entry point to load all necessary polyfills. Hope that helps you @dante01yoon 👍

thank you for comment, where manifest.json located?

[sangquangnguyen]

System is not defined

Same here, how can fix System is not defined

I found out the reason, I saw in manifest.json we have vite/legacy-polyfills-legacy file, we have to include this polyfill-legacy file into the script before the entry point to load all necessary polyfills. Hope that helps you @dante01yoon 👍

thank you for comment, where manifest.json located?

In vite.config.js, you will have build props, then you need to define manifest: true, then run vite build. When Vite builds application successfully, you will see manifest.json inside build folder 👍