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.

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

feat: bring prebundleSvelteLibraries out of experimental #476

Merged
merged 4 commits into from
Oct 22, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
14 changes: 7 additions & 7 deletions docs/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,13 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt

> This is currently required for hybrid packages like Routify, that export both Node and browser code.

### prebundleSvelteLibraries

- **Type:** `boolean`
- **Default:** `false`

Force Vite to pre-bundle Svelte libraries. Setting this `true` should improve initial page load performance, especially when using large Svelte libraries. See the [FAQ](./faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) for details of the pre-bundling implementation.

## Experimental options

These options are considered experimental and breaking changes to them can occur in any release! Specify them under the `experimental` option.
Expand Down Expand Up @@ -240,13 +247,6 @@ export default {

Use extra preprocessors that delegate style and TypeScript preprocessing to native Vite plugins. TypeScript will be transformed with esbuild. Styles will be transformed using [Vite's CSS plugin](https://vitejs.dev/guide/features.html#css), which handles `@imports`, `url()` references, PostCSS, CSS Modules, and `.scss`/`.sass`/`.less`/`.styl`/`.stylus` files. Do not use together with TypeScript or style preprocessors from `svelte-preprocess` as attempts to transform the content twice will fail!

### prebundleSvelteLibraries

- **Type:** `boolean`
- **Default:** `false`

Force Vite to pre-bundle Svelte libraries. Setting this `true` should improve initial page load performance, especially when using large Svelte libraries. See the [FAQ](./faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) for details of the pre-bundling implementation.

### generateMissingPreprocessorSourcemaps

- **Type:** `boolean`
Expand Down
8 changes: 1 addition & 7 deletions docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,4 @@ For reference, check out [windicss](https://github.com/windicss/vite-plugin-wind

### What is going on with Vite and `Pre-bundling dependencies:`?

Pre-bundling dependencies is an [optimization in Vite](https://vitejs.dev/guide/dep-pre-bundling.html). It is required for CJS dependencies, as Vite's development server only works with ES modules on the client side.

Historically, Svelte components had issues being pre-bundled, causing [deduplication issues](https://github.com/vitejs/vite/issues/3910) and [CJS interoperability issues](https://github.com/vitejs/vite/issues/3024). Since Vite 2.5.2, [a new API in Vite](https://github.com/vitejs/vite/pull/4634) allowed us to [automatically handle Svelte library pre-bundling](https://github.com/sveltejs/vite-plugin-svelte/pull/157) for you.

This feature had served us well, however a caveat remained that large Svelte component libraries often slows down the initial page load. If this affects you, try setting [experimental.prebundleSvelteLibraries](./config.md#prebundleSvelteLibraries) option to `true` to speed things up.

In case you still run into errors like `The requested module 'xxx' does not provide an export named 'yyy'`, please check our [open issues](https://github.com/sveltejs/vite-plugin-svelte/issues).
Pre-bundling dependencies is an [optimization in Vite](https://vitejs.dev/guide/dep-pre-bundling.html). It is required for CJS dependencies, as Vite's development server only works with ES modules on the client side. Importantly for Svelte libraries and ESM modules, prebundling combines component libraries into a single file to speed up the initial page load. Try setting the [`prebundleSvelteLibraries`](./config.md#prebundleSvelteLibraries) option to `true` to speed things up. This will likely be enabled by default in future version of the plugin.
2 changes: 1 addition & 1 deletion packages/vite-plugin-svelte/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
},

async buildStart() {
if (!options.experimental?.prebundleSvelteLibraries) return;
if (!options.prebundleSvelteLibraries) return;
bluwy marked this conversation as resolved.
Show resolved Hide resolved
const isSvelteMetadataChanged = await saveSvelteMetadata(viteConfig.cacheDir, options);
if (isSvelteMetadataChanged) {
// Force Vite to optimize again. Although we mutate the config here, it works because
Expand Down
18 changes: 9 additions & 9 deletions packages/vite-plugin-svelte/src/utils/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ export function buildExtraViteConfig(
config.optimizeDeps
);

if (options.experimental?.prebundleSvelteLibraries) {
if (options.prebundleSvelteLibraries) {
extraViteConfig.optimizeDeps = {
...extraViteConfig.optimizeDeps,
// Experimental Vite API to allow these extensions to be scanned and prebundled
Expand Down Expand Up @@ -378,7 +378,7 @@ function buildOptimizeDepsForSvelte(
}

// If we prebundle svelte libraries, we can skip the whole prebundling dance below
if (options.experimental?.prebundleSvelteLibraries) {
if (options.prebundleSvelteLibraries) {
return { include, exclude };
}

Expand Down Expand Up @@ -540,6 +540,13 @@ export interface PluginOptions {
*/
disableDependencyReinclusion?: boolean | string[];

/**
* Force Vite to pre-bundle Svelte libraries
*
* @default false
*/
prebundleSvelteLibraries?: boolean;

/**
* These options are considered experimental and breaking changes to them can occur in any release
*/
Expand Down Expand Up @@ -594,13 +601,6 @@ export interface ExperimentalOptions {
*/
useVitePreprocess?: boolean;

/**
* Force Vite to pre-bundle Svelte libraries
*
* @default false
*/
prebundleSvelteLibraries?: boolean;

/**
* If a preprocessor does not provide a sourcemap, a best-effort fallback sourcemap will be provided.
* This option requires `diff-match-patch` to be installed as a peer dependency.
Expand Down