前言

项目打包后index.js代码在400k以上，准备优化下

过程

optimization.splitChunks

直接在vue.config.js上配置optimization.splitChunks配置，但是好久没有配置了，不知道是使用chainWebpack还是configureWebpack，前面那个是函数式配置，后面那个式对象式配置。准备先使用configureWebpack。

遇到的问题

简单配置后，打包完项目竟然无法运行了。然后切换chainWebpack配置。发现都无法运行，当时还以为是配置出了问题，反复修改反复打包。最后发现是pages代码出了问题。 配置：

module.exports = {
  pages: {
    index: {
      entry: "src/main.ts",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      title: "工单系统",
      chunks:['vue','vant','sentry','','index']
    },
  },
  publicPath: "./",
  configureWebpack: {
    resolve: {
      alias: {
        "@/*": "src/*"
      },
    },
    optimization: {
      splitChunks: {
        chunks: "all",
        minSize: 0,
        // maxSize: 0,
        // minChunks: 1,
        maxAsyncRequests: 10,
        maxInitialRequests: 5,
        // automaticNameDelimiter: '~',
        // name: true,
        cacheGroups: {
          kangc: {
            name: 'kangc',
            chunks: 'initial',
            test: /[\\/]node_modules[\\/]@kangc[\\/]/,
            priority: 10,
          },
          sentry: {
            name: 'sentry',
            test: /[\\/]node_modules[\\/]@sentry[\\/]/,
            priority: 10,
          },
          vant: {
            name: 'vant',
            test: /[\\/]node_modules[\\/]vant[\\/]/,
            priority: 10,
          },
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/]@?vue/,
            priority: 11,
          },
          common: {
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
          },
          vendors: {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 2,
          },
        },
      },
    },
  },
  devServer: {
    proxy: {
      "/api": {
        target: "http://10.23.6.200:8888",
        // target: "http://10.34.0.61:9999",
        changeOrigin: true,
        // pathRewrite: { '^/api': ''}
      },
    },
  },
  // chainWebpack: config => {
  //   config.resolve.alias.set('@/*', 'src/*')
  //   console.log(config.optimization.splitChunks.set)
  //   config.optimization.splitChunks = function() {
  //     console.log('====')
  //     return {
  //       chunks: 'all',
  //       cacheGroups: {
  //         kangc: {
  //           name: 'kangc',
  //           chunks: 'initial',
  //           test: /[\\/]node_modules[\\/]@kangc[\\/]/,
  //           priority: 5,
  //         },
  //         vant: {
  //           name: 'vant',
  //           test: /[\\/]node_modules[\\/]vant[\\/]/,
  //           priority: 4,
  //         },
  //         sentry: {
  //           name: 'sentry',
  //           test: /[\\/]node_modules[\\/]@sentry[\\/]/,
  //           priority: 3,
  //         },
  //         vendors: {
  //           name: 'vendors',
  //           test: /[\\/]node_modules[\\/]/,
  //           priority: -20
  //         }
  //       } }
  //   }
  // }
}

ps：chunks 设置为async是可以运行的，但是设置为all跟inital都无法运行。

解决问题

直接注释pages配置，采用config.plugin('html')的形式修改title。然后就可以正常打包运行了。

疑惑

1. pages的chunks到底是做什么的？
2. webpack的splitChunks的配置中，为什么把vant的优先级降低就会打包报错呢？

总结

大致是优化了打包资源，基本分开的比较清晰了，就是不知道为什么包都这么大