vue懒加载路由 进行命名chunk 生成的chunk文件很大？

Question

vue懒加载路由 由于页面很多 会生成很多chunk文件 导致http请求过多，于是进行命名chunk，但是生成总的chunk文件size很大 该如何解决

非常规的大：
before: 所有chunk文件加起来不超过1mb
after: 15mb

Answer 1

建议将依赖全部放在main.js 文件里导入，打包代码时，再在vue.config.js文件中，对第三方插件代码做一下文件拆分，这里我举例说一下我遇到的情况：

在我的项目中用到了kendo-ui和jquery, kendo-ui是一个非常全面的UI库，这个库我只使用了其中一部分功能，但打包时的体积依然非常大，而且在其核心里，还包含了另一个版本jquery的依赖，导致最终jquery代码被打包了两次，使得chunk-common.js文件体积非常大，最后我将kendo-ui与jquery单独打包，具体的webpack配置方案如下。

const path = require('path');
const webpack = require('webpack');
// 是否是生产环境
const isProd = process.env.NODE_ENV === 'production';

// 在 vue.config.js配置文件中
....
 // 利用pages配置来切割主文件
  pages: {
    index: {
      entry: 'src/main.js',
     // 这里我将默认的三个文件拆分成了五个
      chunks: ['chunk-vendors', 'chunk-common', 'index', 'kendo-ui', 'jquery-min'],
    },
  },
  chainWebpack: config => {

    if(isProd) {
      let splitOptions = config.optimization.get('splitChunks');
      
      splitOptions.maxInitialRequests = 8; // 此设置非常重要，代表最大能拆几个文件
      // 拆分kendo
      splitOptions.cacheGroups.kendo = {
        name: "kendo-ui", // 这里name与pages中chunks里的名字对应
        test: /[\\/]node_modules[\\/](@progress)[\\/]/,
        chunks: 'initial',
        priority: 5,
        reuseExistingChunk: true
      };
      splitOptions.cacheGroups.jquery = {
        name: "jquery-min",
        test: /[\\/]node_modules[\\/]jquery[\\/]/,
        chunks: 'all',
        priority: 10,
        reuseExistingChunk: true,
        enforce: true
      };
      config.optimization.splitChunks(splitOptions);
    }
  },

最终，我将kendo-ui与jquery 从chunk-common里拆分出来，减小了文件体积，同时和能合并其他插件依赖相同代码
这里我是用的Vue CLI创建的项目，希望能对你有帮助。