如何为基于Rollup的Svelte项目添加HMR（热模块替换）功能？

替换livereload为HMR插件 #

原官方模板使用的rollup-plugin-livereload会触发全页刷新，要实现无刷新热更新，推荐用svelte-hmr配合rollup-plugin-hot：

1. 安装依赖

npm install --save-dev svelte-hmr rollup-plugin-hot

2. 修改Rollup配置文件（rollup.config.js）

• 引入新插件：

import svelteHmr from 'svelte-hmr';
import hot from 'rollup-plugin-hot';

• 配置Svelte插件的HMR选项：

svelte({
  // 保留原有include、exclude等配置
  plugins: [
    svelteHmr({
      hot: !!process.env.ROLLUP_WATCH, // 仅在开发watch模式启用
      preserveLocalState: true, // 保留组件本地状态
      injectCss: true, // 样式热更新无需刷新
    }),
  ],
  // 开发模式下不单独输出CSS，交给HMR处理
  css: css => {
    if (!process.env.ROLLUP_WATCH) {
      css.write('public/build/bundle.css');
    }
  },
})

• 添加热更新插件到plugins数组末尾：

plugins: [
  // 原有的resolve、commonjs、babel等插件...
  // 仅在watch模式启用热更新
  process.env.ROLLUP_WATCH && hot({
    public: 'public', // 对应你的静态资源目录
    clientModule: 'rollup-plugin-hot/client',
  }),
]

3. 修改入口文件（main.js）
   添加HMR生命周期处理代码：

import App from './App.svelte';

const app = new App({
  target: document.body,
});

// HMR兼容逻辑
if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(() => {
    app.$destroy();
  });
}

export default app;

优化构建速度（解决8-10秒等待问题） #

除了HMR，还可通过以下方式进一步提速：

• 启用Rollup缓存：在rollup.config.js的导出配置中添加cache: true，让Rollup复用之前的构建结果。
• 拆分第三方依赖：用@rollup/plugin-external把gRPC等第三方包标记为外部依赖，减少每次构建的处理量。
• 简化开发环境处理：仅在生产环境启用代码压缩（如@rollup/plugin-terser），开发模式下跳过不必要的代码转换步骤。

关于gRPC-web的兼容性 #

你提到的Vite不支持gRPC-web的问题，在Rollup中无需担心——HMR插件仅处理Svelte组件和JS模块的热替换，不会干扰gRPC-web的原有打包配置，保持现有Rollup对gRPC-web的处理逻辑即可。

内容的提问来源于stack exchange，提问作者sagar007