编译优化
- 启用
production 模式：在构建生产环境时，Svelte 编译器会进行许多优化。比如移除开发时的警告、精简代码等。在 rollup.config.js 或 webpack.config.js 中设置相应配置启用生产模式。例如在 Rollup 中：
import svelte from '@rollup/plugin-svelte';
export default {
input: 'src/main.js',
output: {
file: 'public/build/bundle.js',
format: 'iife'
},
plugins: [
svelte({
// 启用生产模式优化
compilerOptions: {
dev: false
}
})
]
};
- 使用
svelte-preprocess：它可以在编译前对代码进行预处理，例如使用 PostCSS 处理样式，Babel 转译 JavaScript 代码，从而提高代码质量和编译效率。安装 svelte-preprocess 后，在 Rollup 或 Webpack 配置中添加如下设置：
import sveltePreprocess from'svelte-preprocess';
export default {
input: 'src/main.js',
output: {
file: 'public/build/bundle.js',
format: 'iife'
},
plugins: [
svelte({
preprocess: sveltePreprocess()
})
]
};
渲染优化
- 减少不必要的重新渲染：
- 使用
$: 语法控制响应式更新：Svelte 会根据 $: 标记的语句来判断哪些数据变化会导致组件重新渲染。尽量将复杂计算放在 $: 块中，避免不必要的重新渲染。例如：
<script>
let count = 0;
let complexResult;
$: {
complexResult = performComplexCalculation(count);
}
function performComplexCalculation(value) {
// 复杂计算逻辑
return value * value;
}
</script>
- **使用 `{#if}` 而不是 `{#each}` 来隐藏元素**：`{#each}` 会为每个迭代创建一个新的 DOM 节点，而 `{#if}` 可以在条件为假时完全移除 DOM 节点，减少渲染开销。例如：
{#if showElement}
<div>要显示的元素</div>
{/if}
- 优化列表渲染：
- 使用
key 属性：在 {#each} 块中，为每个列表项提供一个唯一的 key。这有助于 Svelte 高效地跟踪列表项的变化，只更新实际改变的元素，而不是重新渲染整个列表。例如：
{#each items as item, index}
<div key={item.id}>{item.name}</div>
{/each}
- **虚拟列表**：对于大型列表，可以考虑使用虚拟列表技术。虽然 Svelte 本身没有内置虚拟列表组件，但可以通过第三方库如 `svelte-virtual-list` 来实现。它只渲染当前视口内的列表项，极大地提高性能。安装后使用如下：
<script>
import VirtualList from'svelte-virtual-list';
const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
</script>
<VirtualList {items} let:item>
<div>{item.name}</div>
</VirtualList>
代码分割
- 动态导入组件：使用 Svelte 的动态导入语法 (
import('./Component.svelte').then(module => { /* 使用组件 */ })) 来实现代码分割。这在组件不总是需要立即加载时非常有用，例如路由组件。在 SvelteKit 中，路由就是自动进行代码分割的。例如：
<script>
let component;
const loadComponent = async () => {
const module = await import('./MyComponent.svelte');
component = new module.default({ target: document.body });
};
</script>
<button on:click={loadComponent}>加载组件</button>
- 路由懒加载：在 SvelteKit 项目中，路由文件会自动进行代码分割。当用户导航到某个路由时，相应的路由组件代码才会被加载。这使得初始加载包体积更小，提高应用的加载速度。例如，
src/routes/about/+page.svelte 只会在用户访问 /about 路由时加载。
其他优化策略
- 优化 CSS：
- 避免全局样式污染：尽量使用 Svelte 的 scoped 样式，即样式只作用于当前组件。这可以防止样式冲突，并且减少浏览器计算样式的工作量。例如：
<style>
div {
color: red;
}
</style>
- **压缩 CSS**：在构建过程中，使用工具如 `cssnano` 来压缩 CSS，去除不必要的空格、注释等，减小文件体积。在 Rollup 配置中添加 `cssnano` 插件：
import css from 'rollup-plugin-css-only';
import cssnano from 'cssnano';
export default {
input: 'src/main.js',
output: {
file: 'public/build/bundle.js',
format: 'iife'
},
plugins: [
css({
output: 'bundle.css',
plugins: [cssnano()]
})
]
};
- 优化 JavaScript：
- Tree Shaking：确保构建工具（如 Rollup 或 Webpack）正确配置以实现 Tree Shaking，这样未使用的代码不会被包含在最终的 bundle 中。在 Rollup 中，默认开启 Tree Shaking，只要确保你的模块使用 ES6 模块语法导出。
- 使用原生 JavaScript 特性：避免引入不必要的第三方库，尽量使用原生 JavaScript 特性，因为原生特性通常经过高度优化，性能更好。例如，使用
fetch 进行网络请求而不是引入一个大型的 HTTP 库。
