面试题：Vue CLI构建优化之代码分割策略

Question

基于Vue CLI，阐述代码分割的常用策略，如何利用Webpack的splitChunks插件实现对第三方库和业务代码的有效分割，以优化构建后的文件大小和加载性能，并举例说明如何配置。

Answer 1

代码分割常用策略

1. 路由懒加载：在Vue Router中，使用import()语法来实现路由组件的懒加载。当访问到对应的路由时，才会加载该组件，而不是在应用启动时就全部加载。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('./views/Home.vue')
    }
  ]
})

2. 动态导入：在组件内部或其他逻辑中，根据需要动态导入模块。例如在一个按钮点击事件中加载一个较大的图表库：

export default {
  methods: {
    async loadChart() {
      const Chart = await import('chart.js');
      // 使用Chart进行图表绘制
    }
  }
}

利用splitChunks插件分割第三方库和业务代码

1. 配置原理：splitChunks插件是Webpack内置的代码分割插件。通过合理配置，可以将第三方库（如Vue、Vue Router、Axios等）和业务代码分别打包到不同的文件中。这样浏览器可以并行加载这些文件，并且第三方库文件由于不经常变动，还可以被浏览器缓存，提高加载性能。
2. 配置示例：在Vue CLI项目中，通常在vue.config.js文件中配置。

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

在上述配置中：

• chunks: 'all'表示对所有类型的chunk（包括入口chunk和异步chunk）都进行代码分割。
• cacheGroups.vendor定义了一个缓存组，test正则表达式用于匹配来自node_modules的模块，name指定了分割出来的文件名为vendors.js 。这样配置后，Webpack会将所有来自node_modules的模块打包到vendors.js文件中，业务代码会打包到其他文件，实现了第三方库和业务代码的有效分割。