Vue 进阶面试题, 如何解决 Vue 打包时 vendor 文件过大的问题?

Step 1

Q:: 如何解决 Vue 打包时 vendor 文件过大的问题？

A:: 在 Vue 项目中，vendor 文件通常是第三方库的集合，如果这些文件过大，会导致页面加载速度变慢，影响用户体验。解决这个问题的方法有以下几种： 1. **使用按需加载 (Lazy Loading)**：通过动态导入 (Dynamic Import) 的方式，只在需要时加载模块，避免在初始加载时引入所有代码。 2. 使用 Webpack 的 SplitChunks 插件：通过配置 Webpack 的 optimization.splitChunks，将依赖库拆分为更小的块，减少单个文件的体积。 3. 使用 CDN 加速：将一些常用的库如 lodash、moment 等放在 CDN 上，从而减小打包文件的体积。 4. 剔除不必要的依赖：通过分析工具如 webpack-bundle-analyzer 查找并移除不必要的依赖，减小 vendor 文件的体积。

Step 2

Q:: 为什么要使用按需加载？

A:: 按需加载的主要目的是减少页面的初始加载时间。通过将组件或者模块分割成独立的代码块，并在需要时动态加载，可以显著减少首屏加载时间，提高用户体验。在复杂的单页应用中，按需加载能够有效避免所有代码一次性加载，降低浏览器的性能压力。

Step 3

Q:: 如何配置 Webpack 的 SplitChunks 插件？

A:: 在 Vue CLI 项目中，可以在 vue.config.js 文件中配置 Webpack 的 optimization.splitChunks 选项。例如：

 
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 70000,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}
 

通过这个配置，可以更加细粒度地控制打包行为，将依赖库拆分为更小的块。