考察点分析

本题主要考核以下核心能力维度：

  1. 构建工具深度使用能力：Vite多页应用配置涉及Rollup构建机制的掌握
  2. 模块化工程化思维：动态导入语法与代码分割的实际应用
  3. 性能优化意识：通过懒加载实现资源加载优化

具体技术评估点：

  • Vite多入口配置方案
  • Rollup输入输出配置原理
  • 动态import()的编译结果与HTTP/2推送机制
  • 代码分割(Code Splitting)与预加载策略
  • 模块依赖解析规则

技术解析

关键知识点优先级

  1. Rollup输入配置 > 动态导入语法 > 分包策略优化

原理剖析

多页应用(MPA)配置： Vite通过build.rollupOptions.input配置多入口，每个入口对应独立HTML文件。构建时生成多个独立bundle，通过文件系统约定式路由自动关联入口模块。

动态导入机制： 使用import()语法触发代码分割，Vite会：

  1. 解析动态导入路径
  2. 生成独立chunk文件
  3. 注入预加载标签<link rel="modulepreload">
  4. 在浏览器空闲时按需加载

常见误区

  1. 混淆传统多页应用与SPA路由配置
  2. 动态导入路径使用变量导致无法静态分析
  3. 忽略公共模块提取导致的重复打包

问题解答

多页应用配置：

  1. 创建pages目录存放各页面

      /src
  /pages
    /home
      index.html
      main.js
    /about
      index.html
      main.js

  2. 配置vite.config.js：

  export default {
  build: {
    rollupOptions: {
      input: {
        home: '/src/pages/home/index.html',
        about: '/src/pages/about/index.html'
      }
    }
  }
}

组件懒加载实现：

  // 路由配置示例（Vue3）
const router = createRouter({
  routes: [
    {
      path: '/heavy-component',
      component: () => import('@/components/HeavyComponent.vue') // 关键语法
    }
  ]
})

解决方案

编码示例 

  // vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      input: glob.sync(path.resolve(__dirname, 'src/pages/**/index.html')),
      output: {
        manualChunks(id) { // 分包优化
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

优化说明：

  1. 使用glob自动扫描页面入口
  2. 提取vendor公共模块减少重复
  3. 动态导入组件自动生成独立chunk

扩展性建议

  1. 预加载策略：通过import(/* webpackPreload: true */'...')提示浏览器预加载
  2. 低端设备适配：使用loading组件包裹异步组件提供加载态
  3. 分包控制：通过build.chunkSizeWarningLimit配置大文件告警阈值

深度追问

问题1：如何防止动态导入导致的瀑布流请求？

提示：使用Preload与Prefetch组合策略，配合HTTP/2 Server Push

问题2：Vite开发环境与生产环境的懒加载实现差异？

提示：开发环境使用原生ESM，生产环境生成物理chunk文件

问题3：如何测量懒加载性能提升？

提示：使用Navigation Timing API与Chrome Performance Tab进行加载瀑布流分析

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history