记录一次上测试环境，vue项目包过大问题，webpack优化项目

背景：测试环境服务器很慢，上传一个30M的视频需要接近4分钟，当测试告诉我，首屏加载太慢的时候，我不以为然以此搪塞了过去，后来不放心看了下发现确实有问题，

 

所有的文件和依赖都被打包到了app.js中。

疑问：webpack4+ 不是有默认的配置了吗，为什么没看到打包出来的chunks文件,只有一个app.js  ？？？？

自己手动加上了splitchunks（之前是commonchunks，已废弃），

config.optimization.splitChunks({
        chunks: 'all',
        minSize: 30000,
        // maxSize:30000,
      //其他入口chunk引用的次数
        minChunks: 1,
        cacheGroups: {

          libs: {

            name: 'chunk-libs',

            test: /[\\/]node_modules[\\/]/,

            priority: 10,

            chunks: 'initial' // only package third parties that are initially dependent

          },

          elementUI: {

            name: 'chunk-elementUI', // split elementUI into a single package

            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app

            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm

          },

          commons: {

            name: 'chunk-commons',

            test: resolve('src/components'), // can customize your rules

            minChunks: 3, //  minimum common number

            priority: -10,

            reuseExistingChunk: true

          }

        }
      })

发现有所减少，可是还是比较大，询问后端得知配置的nginx，没有开启gzip压缩，随后想到cdn引入

configureWebpack: {
    externals:{
      'vue':'Vue',  //这里必须加上vue,不加的话会优先使用npm中的vue，导致element的组件不能正常使用
      'element-ui': 'ELEMENT',
    },
   
  },

configureWebpack: {
    externals:{
      'vue':'Vue',  //这里必须加上vue,不加的话会优先使用npm中的vue，导致element的组件不能正常使用
      'element-ui': 'ELEMENT',
    },
   
  },

index.html  中

　　　　<link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">

　　　　<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

　　   <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>

 

 

至此打包后的文件大小已经变成了200多K，

 

还是不明白，cli脚手架中的默认webpack配置中，为啥没有自动分离我的js和css，而是都打包到了app.js中