面试题：Webpack优化Vue组件懒加载的策略

Question

在大型Vue项目中，组件懒加载会涉及到许多chunk文件。请阐述如何利用Webpack的代码分割和优化插件，对懒加载的chunk文件进行合理拆分与加载优化，以提升页面加载性能，比如如何配置splitChunks参数？

Answer 1

1. 代码分割基础

Webpack 的代码分割主要通过 splitChunks 插件实现。它能将入口chunk及其所有依赖进行拆分，提取出公共模块，使得多个chunk可以共享这些模块。

2. splitChunks 参数配置

• chunks：指定哪些chunk进行分割，默认 async，只对异步chunk（动态导入，即懒加载的chunk）进行分割；设置为 all 时，对所有chunk（同步和异步）都进行分割；设置为 initial 只对初始chunk进行分割。

splitChunks: {
    chunks: 'async'
}

• minSize：指定被提取出来的chunk最小大小（以字节为单位），默认 20000（20kb）。如果小于这个值，不会被提取。

splitChunks: {
    minSize: 20000
}

• minRemainingSize：在Webpack 5中新增，指定拆分后剩余部分的最小大小，避免过度拆分。

splitChunks: {
    minRemainingSize: 0
}

• minChunks：指定被提取的模块至少被多少个chunk包含才会被拆分出来，默认 1。例如设置为 2，则该模块要被至少两个chunk使用才会被拆分。

splitChunks: {
    minChunks: 1
}

• maxAsyncRequests：指定按需加载（懒加载）时并行请求的最大数量，默认 30。如果设置过小，可能会影响加载速度，因为需要更多的请求来获取所有资源。

splitChunks: {
    maxAsyncRequests: 30
}

• maxInitialRequests：指定入口chunk并行请求的最大数量，默认 30。

splitChunks: {
    maxInitialRequests: 30
}

• cacheGroups：用于更细粒度地控制代码分割。可以定义多个缓存组，每个缓存组都有自己的规则。

splitChunks: {
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            name:'vendors',
            chunks: 'all',
            priority: -10
        },
        common: {
            name: 'common',
            minChunks: 2,
            chunks: 'initial',
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

- **`vendors` 缓存组**：`test` 用于匹配模块路径，这里匹配 `node_modules` 中的模块；`name` 是拆分出来的chunk的名称；`chunks` 设置为 `all` 表示对所有chunk进行处理；`priority` 用于设置优先级，数值越大优先级越高。
- **`common` 缓存组**：`minChunks` 为 `2` 表示至少被两个chunk使用的模块才会被提取到这个缓存组；`chunks` 设置为 `initial` 只对初始chunk有效；`reuseExistingChunk` 设置为 `true` 表示如果该模块已经在其他chunk中被提取过，就不再重复提取。

3. 加载优化

• 动态导入语法：在Vue组件懒加载中，使用 () => import('./Component.vue') 这样的动态导入语法，Webpack会自动将其拆分成单独的chunk。
• 预加载与预渲染：
  • 预加载：通过 <link rel="preload" href="chunk.js" as="script"> 提前加载关键的chunk文件。在Vue Router中，可以通过配置 router.js 实现组件懒加载的预加载：

const router = new VueRouter({
    routes: [
        {
            path: '/example',
            component: () => ({
                component: import('./Example.vue'),
                // prefetch 用于预取（优先级低于 preload）
                // preload: true, 
                // 如需预加载，设置为 true
            })
        }
    ]
})

- **预渲染**：使用如 `prerender-spa-plugin` 插件，在构建时生成静态HTML文件，提升首屏加载速度。

通过合理配置Webpack的 splitChunks 参数及运用相关加载优化手段，可以有效提升大型Vue项目中懒加载chunk文件的加载性能。