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
Run optimizeImports for all imports on dev server start #41
Comments
Note that It might be worth first trying to explicitly instruct Vite to not optimize
However, it sounds like you want the experimental Svelte Vite plugin feature that prebundles the entire library ahead of time. This may cause a longer cold start but will probably resolve your issue. See their example config. // vite.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [svelte({ prebundleSvelteLibraries: true })],
optimizeDeps: {
// carbon-components-svelte is large, prebundle
include: ['carbon-components-svelte'],
// carbon-icons-svelte is huge and takes 12s to prebundle, better use deep imports for the icons you need
exclude: ['carbon-icons-svelte']
}
}); |
Thanks for the quick response. I tried to add And since we are using SvelteKit we can't but I've tried to set the experimental option of This is our new import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import wasmPack from 'vite-plugin-wasm-pack';
/** @type {import('vite').UserConfig} */
const config = {
define: {
'process.env': process.env
},
resolve: {
alias: {
$components: resolve('./src/components'),
$stores: resolve('./src/stores'),
$types: resolve('./src/types')
}
},
plugins: [sveltekit(), wasmPack('./sie-parser-wasm')],
optimizeDeps: {
// carbon-components-svelte is large, prebundle
include: ['carbon-components-svelte'],
// carbon-icons-svelte is huge and takes 12s to prebundle, better use deep imports for the icons you need
exclude: ['carbon-icons-svelte']
},
ssr: {
noExternal: ['@df/common']
},
server: {
port: 3000
}
};
export default config; And our new import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
import { optimizeImports } from 'carbon-preprocess-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess({
scss: {
includePaths: ['./src/styles/'],
data: '@import "index.scss;"'
}
}),
optimizeImports()
],
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: '404.html'
})
},
vitePlugin: {
prebundleSvelteLibraries: true,
experimental: {
useVitePreprocess: true,
inspector: {
toggleKeyCombo: 'meta-shift',
showToggleButton: 'always',
toggleButtonPos: 'bottom-right'
}
}
}
};
export default config; |
Thanks for digging into this and sharing your config. I hope |
Commenting for posterity.
This means that – for Vite/SvelteKit users – you do not necessarily need the However, you will notice:
I would still recommend using TLDR: using Example import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";
/** @type {import('vite').UserConfig} */
export default {
plugins: [
svelte({
preprocess: [vitePreprocess(), optimizeImports()],
}),
optimizeCss(),
],
// Optional, but recommended for even faster cold starts.
// Instruct Vite to exclude packages that `optimizeImports` will resolve.
optimizeDeps: {
exclude: [
"carbon-components-svelte",
"carbon-icons-svelte",
"carbon-pictograms-svelte",
],
},
}; |
Hello, when I do
npm install
in my project to install a new dependency or update another dependency the.vite/deps/
folder gets deleted. It then gets added when I runnpm run dev
again.The problem I now get with
optimizeImports()
is that it only optimizes the imports when I go to the SvelteKit route that has the import. The issue I'm now facing is that the request to fetch the optimized imports fails because of a timeout:And because it fails I get redirected back to the route I came from. Then when I try to go to the route again it works because now they have been optimized.
It feels like the optimization of the import isn't fast enough for SvelteKit to get the optimized version in
.vite/deps
and therefore times out.Do I miss some setting in my svelte/vite config? (See them below)
And is it at all possible to optimize all imports (if we have to) when we start the dev server?
I would also like to add that I had no issue with this when I ran SvelteKit version 405 (very old version without the new routing stuff). But updating to the latest version gave me this issue.
The text was updated successfully, but these errors were encountered: