解决vue打包后vendor.js文件过大问题

解决vue打包后vendor.js文件过大问题是一个非常重要的优化工作。通常采用分包策略和动态导入的方式，能有效地将vendor.js体积缩小到最小值。

以下是解决vue打包后vendor.js文件过大问题的完整攻略：

1. 分包策略

将项目的公共库和第三方库分别打包，使项目的vendor.js文件从一个大文件拆成多个小的vendor文件，每个文件都对应一部分的依赖库。实现分包有多种方法，如webpack自带的SplitChunksPlugin和DllPlugin插件等。下面以SplitChunksPlugin为例子阐述具体步骤：

1. 在webpack.config.js中配置optimization.splitChunks选项：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

1. chunks: 'all'，表示对所有的代码块进行分离打包。

2. 动态导入

通过import()动态导入需要的依赖库，从而减轻vendor.js文件的大小。下面以vue-router的动态导入为例子：

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

在路由的配置中，通过箭头函数导入需要的组件，从而实现动态导入的功能。不需要的组件不会被导入，减轻了vendor.js文件的体积。

另外一个动态导入的示例是使用dynamic-import-webpack插件，该插件能够帮助自动将代码拆分成更小的多个包，进一步压缩vendor.js文件的体积。

import('/path/to/module.js')
  .then(({default: myModule}) => {
    // use myModule
  })
  .catch(err => {
    // handle errors
  });

以上就是解决vue打包后vendor.js文件过大问题的完整攻略和两个示例说明。