Vite的热更新原理：更快、更好、更强！

2023-05-18 00:06:23

Vite：揭秘热更新原理，拥抱高效前端开发

增量编译：只更新必要部分

传统的构建工具在代码修改后需要重新构建整个项目，导致漫长的等待时间。Vite 采用增量编译，仅重新编译修改的文件及其依赖项，极大缩短了编译时间，即使是大型项目也能迅速更新。

// Vite 配置文件（vite.config.js）
export default {
  plugins: [
    {
      name: 'vite-plugin-vue2',
      resolveId(id) {
        if (id.endsWith('.vue')) {
          return `${id}?vue`;
        }
        return null;
      },
      load(id) {
        if (id.endsWith('.vue?vue')) {
          return vueTemplateCompiler.compileTemplate(id.slice(0, -4));
        }
        return null;
      },
    },
  ],
};

HMR（热模块替换）：无缝更新模块

HMR 允许在修改模块后自动检测变化，并仅重新加载受影响的模块。无需刷新页面，即可看到更新效果，极大提升开发效率。

// 引入 Vite HMR 插件
import { createServer } from 'vite';
import vue from '@vitejs/plugin-vue';

// 创建 Vite 开发服务器
const server = await createServer({
  plugins: [vue()],
  server: {
    hmr: {
      port: 443,
    },
  },
});

// 启动服务器
await server.listen();

模块化构建：加速开发速度

Vite 将项目文件分解为独立模块，并在需要时动态加载。这种模块化架构显著提升了构建速度，尤其是在页面交互较频繁或代码体积较大的情况下。

<!-- HTML 模块化加载 -->
<div id="app">
  <component :is="component"></component>
</div>

<script>
import { defineAsyncComponent } from 'vue';

const component = defineAsyncComponent(() => import('./components/MyComponent.vue'));
</script>