项目打包后得到的vendor.js文件过大，进行拆包以减少文件的大小，具体实现如下：

webpack3.x使用new webpack.optimize.CommonsChunkPlugin打包文件分割优化加载

修改项目build内的webpack.prod.conf.js文件，将项目中的需要拆的文件放到下面代码的后面

// 分包
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

写法1

// 从 vendor 中提取 vant和minui
new webpack.optimize.CommonsChunkPlugin({
  name: 'chunk-vant-mintui',
  chunks: ['vendor'],
  minChunks: function(module) {
    return module.resource && (/vant/.test(module.resource)||/mint-ui/.test(module.resource))
  }
}),
// 从 vendor 中提取 moment
new webpack.optimize.CommonsChunkPlugin({
  name: 'chunk-moment',
  chunks: ['vendor'],
  minChunks: function(module) {
    return module.resource && /moment/.test(module.resource)
  }
}),

// 手动配置加载顺序
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  // 这里要调整成手动排序 chunk
  chunksSortMode: 'manual',
  // 把我们自己分割好的包的 chunk 名一个个按顺序记录在这里，不然打包会报错
  chunks: [
    'manifest',
    'vendor',
    'chunk-vant-mintui', 
    'chunk-moment',
    'app'
  ]
}),

注：以上方法也可以拆分app.js；打包后index.html加载顺序效果如图所示：
调整前：

调整后：

写法2（将三个公共的依赖模块拆分为一个新的模块）

// 拆分vant、mintui、和moment
new webpack.optimize.CommonsChunkPlugin({
  name: 'vant-mint-moment',
  minChunks: function (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules/vant')
      ) === 0
    ) || (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules/mint-ui')
      ) === 0
    ) || (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules/moment')
      ) === 0
    )
  }
}),

webpack 4及更高版本使用SplitChunksPlugin用于自动拆分公共的依赖模块到已有的入口chunk中，或者提取到新的生成的chunk
修改vue.config.js文件：

module.exports = {
	configureWebpack: (config) => {
	    config.optimization = {
	      splitChunks: {
	        chunks: 'all',
	        cacheGroups: {
	          vant: {
	            name: 'chunk-vant',
	            test: /[\\/]node_modules[\\/]vant[\\/]/,
	            priority: 9,
	            chunks: 'all',
	          },
	
	          libs: {
	            name: 'chunk-minui',
	            test: /[\\/]node_modules[\\/]mint-ui[\\/]/,
	            priority: 8,
	            chunks: 'all',
	          },
	          common: {
	            name: 'chunk-common',
	            chunks: 'initial',
	            minChunks: 1,
	            priority: 7,
	            reuseExistingChunk: true,
	          },
	        },
	      },
	      runtimeChunk: 'single',
	    };
	  },
  }