Vite手动分包

问题描述

• 浏览器缓存策略：浏览器在请求静态资源时，只要静态资源的名称不变，它就不会重新请求 js资源
• 当一部分业务代码改动后，重新打包，打包后的文件名会发生变化，这意味着每次打包后，用户就要重新下载请求新的 js，依赖包是固定不变的，有变动的只是我们的业务代码，基于这个点我们就可以在其基础上打包优化

解决方案：

1、 配置 Vite

利用 Rollup 的代码分割能力来实现更精细的控制，在这个配置中，manualChunks 函数用于定义如何分割代码块。如果模块路径包含 node_modules，则这些模块会被打包到 vendor 包中。此外，可以指定项目中特定目录的模块打包到单独的包中，如例子中的 components

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 控制代码分割
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 依赖模块分包
            return 'vendor';
          }
          if (id.includes('/my-components/')) {
            // 特定路径组件分包
            return 'components';
          }
        }
      }
    }
  }
});

2、动态导入

动态导入（Dynamic Import）是一种在 JavaScript 中按需加载模块的技术。它允许您在运行时导入模块，而不是在初始加载阶段，这有助于减少应用程序的启动时间并优化资源使用。动态导入通过 Promise API 实现，使得模块加载可以异步进行。

// 假设有一个按钮，用户点击后加载模块
document.getElementById('load-button').addEventListener('click', () => {
  import('./dynamicModule.js').then(module => {
    module.loadFeature();
  }).catch(error => {
    console.error('Error loading the module:', error);
  });
});

dynamicModule.js 只有在用户点击按钮后才会被加载。这种方式非常适合用于那些不是立即需要的功能，如按需加载的对话框、工具或其他资源