面试题：Vue CLI构建的项目中如何优化代码分割与懒加载

Question

在使用Vue CLI构建大型项目时，为了提高加载性能，需要进行代码分割与懒加载优化。请详细说明如何利用Vue CLI实现组件的懒加载以及如何配置Webpack进行更细粒度的代码分割，并且阐述这两者对项目性能的影响。

Answer 1

1. Vue CLI 实现组件懒加载

在Vue中，实现组件懒加载非常简单，使用 import() 语法即可。

路由组件懒加载

在路由配置文件（通常是 router/index.js）中，原本引入组件的方式如下：

import Home from '@/views/Home.vue';
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

改为懒加载方式：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  }
];

这样，当访问到该路由时，才会加载对应的组件，而不是在项目启动时就加载所有组件，从而提高初始加载性能。

普通组件懒加载

对于普通组件，在父组件中引入时也可以使用懒加载。例如：

<template>
  <div>
    <LazyComponent />
  </div>
</template>

<script>
export default {
  components: {
    LazyComponent: () => import('@/components/LazyComponent.vue')
  }
};
</script>

这样只有当父组件渲染到 LazyComponent 时，才会加载 LazyComponent.vue 组件。

2. Webpack 配置实现更细粒度的代码分割

使用 splitChunks 配置

在Vue CLI项目中，webpack.config.js 文件一般在 vue.config.js 中通过 chainWebpack 进行配置。首先确保项目根目录下有 vue.config.js 文件，如果没有则创建。

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        commons: {
          name: 'commons',
          minChunks: 2,
          chunks: 'initial'
        }
      }
    });
  }
};

• chunks: 'all' 表示对所有类型的chunk（initial、async、all）都进行代码分割。
• cacheGroups 用于定义不同的缓存组。
  • vendor 缓存组：test 用于匹配来自 node_modules 的模块，name 定义了打包后的文件名 vendors，这样所有来自 node_modules 的依赖会被打包到一个单独的文件中，提高缓存利用率。
  • commons 缓存组：name 定义打包后的文件名 commons，minChunks: 2 表示被引用至少2次的模块会被提取到该组，chunks: 'initial' 表示只对初始加载的chunk进行处理，这样可以把多个页面共用的模块提取出来，减少重复加载。

3. 对项目性能的影响

组件懒加载的影响

• 优点：
  • 减少初始加载体积：在项目启动时，只加载必要的代码，而不是所有组件的代码，使得初始加载的文件大小减小，加快首屏加载速度。
  • 提高用户体验：用户能更快看到页面内容，尤其是在网络环境较差的情况下，避免长时间等待所有组件加载完成。
• 缺点：
  • 增加请求次数：每次懒加载一个组件，都会增加一次HTTP请求，过多的请求可能会带来额外的开销，不过现代浏览器对并发请求有一定优化。

细粒度代码分割的影响

• 优点：
  • 更好的缓存策略：将 node_modules 依赖和公共模块分别打包，使得浏览器可以更好地利用缓存。如果 node_modules 中的依赖没有变化，对应的 vendors 文件就可以直接从缓存中加载，无需重新下载。同样，公共模块也能被多个页面复用缓存。
  • 优化加载速度：通过提取公共模块，减少了每个页面需要加载的重复代码，提高了整体的加载性能。
• 缺点：
  • 配置复杂性：更细粒度的代码分割需要更复杂的Webpack配置，增加了开发和维护的成本。如果配置不当，可能达不到预期的优化效果，甚至会降低性能。