在Sapper项目中修改Svelte组件时能否仅重建/重载客户端代码？

绝对可以实现！我之前维护大型Sapper项目时也遇到过完全一样的问题——每次改个小组件就要等30秒+的全量编译，服务端那些冗余的初始化流程简直是噩梦。下面是我实践过的有效方案，能让你修改Svelte组件时只重建客户端代码，同时保持服务端持续运行：

核心思路 #

Sapper默认的dev命令会同时监听客户端和服务端代码变动并全量重建，我们的目标是拆分编译流程：让服务端只启动一次（初始化后就保持运行），客户端单独用Rollup监听改动并增量编译，配合热重载刷新页面。

具体步骤 #

1. 拆分Rollup配置文件 #

把默认的rollup.config.js拆成两个独立的配置文件，分别对应客户端和服务端：

rollup.client.js（仅处理客户端编译）

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import { sapperRollupConfig } from '@sapper/rollup';

const production = !process.env.ROLLUP_WATCH;

export default {
	...sapperRollupConfig.client,
	plugins: [
		svelte({
			dev: !production,
			emitCss: true,
			hot: !production, // 开启Svelte热重载
		}),
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		!production && livereload('static'), // 监听static目录变化自动刷新
		production && terser()
	].filter(Boolean)
};

rollup.server.js（仅处理服务端编译）

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { sapperRollupConfig } from '@sapper/rollup';

const production = process.env.NODE_ENV === 'production';

export default {
	...sapperRollupConfig.server,
	plugins: [
		svelte({
			generate: 'ssr',
			dev: !production
		}),
		resolve({
			dedupe: ['svelte']
		}),
		commonjs()
	]
};

2. 更新package.json脚本 #

修改scripts字段，添加单独的客户端监听和服务端启动命令：

{
  "scripts": {
    "dev:client": "ROLLUP_WATCH=true rollup -c rollup.client.js -w",
    "build:server": "rollup -c rollup.server.js",
    "predev:server": "npm run build:server",
    "dev:server": "node __sapper__/build/server.js"
  }
}

3. 启动开发环境 #

打开两个终端窗口：

1. 第一个终端启动服务端：npm run dev:server
   • 这一步会先编译服务端代码，然后启动服务端进程——数据层初始化、IoT设备连接这些流程只会执行一次
2. 第二个终端启动客户端监听：npm run dev:client
   • 现在修改任何Svelte组件，Rollup只会编译客户端代码，几秒内就能完成热重载，服务端完全不会重启

注意事项 #

• 如果你的组件涉及SSR（服务端渲染）逻辑，修改后SSR部分不会自动更新，直到你手动重启服务端。但如果只是客户端交互组件的改动，完全不需要重启服务端
• 当需要修改服务端代码（比如路由、API逻辑）时，只需重新运行npm run dev:server即可，平时改组件只用关注客户端监听进程
• 确保__sapper__/build目录有写入权限，客户端编译产物会自动写入static/build，服务端会自动读取最新的客户端资源

这样调整后，开发效率会提升很多——再也不用每次改个按钮都等半分钟了！

内容的提问来源于stack exchange，提问作者mr.freeze