使用vue打包时vendor文件过大或者是app.js文件很大的问题

处理vue打包时vendor文件过大或者是app.js文件很大的问题可以通过以下方法进行：

1. 使用动态导入 （Dynamic Import）

动态导入是Vue.js 2.6版本开始提供的一个特性，可以让你在运行时（runtime）条件下去组织代码切割，从而减小打包体积。它是通过 import() 语法实现的。使用动态导入可以减少app.js的大小，提高页面加载速度。

以vue-router为例，在路由的时候使用动态导入：

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

其中，webpackChunkName可以指定代码块的名称。指定了chunk名称后，可以在webpack输出的文件中查看到这个代码块的文件名。

2. 使用分包（splitChunks）

在Webpack4中，splitChunks已经成为了一个新的option，在optimization中使用。可以把第三方库和模块代码分别打包到少数的几个文件中。

在vue.config.js中配置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

其中，test: /[\/]node_modules[\/]/ 表示只打包来自 node_modules 文件夹下的模块，而 common 文件夹下的模块则不打包。

使用该方法，webpack会将node_modules中的第三方库抽取成vendor.js，这样就可以减少vendor.js的文件大小，从而加快网页的加载速度。

以上就是使用vue打包时处理vendor文件过大或者是app.js文件很大的问题的攻略。