背景：測試環境伺服器很慢，上傳一個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'//onlypackagethirdpartiesthatareinitiallydependent }, elementUI:{ name:'chunk-elementUI',//splitelementUIintoasinglepackage priority:20,//theweightneedstobelargerthanlibsandapporitwillbepackagedintolibsorapp test:/[\\/]node_modules[\\/]_?element-ui(.*)///inordertoadapttocnpm }, commons:{ name:'chunk-commons', test:resolve('src/components'),//cancustomizeyourrules minChunks:3,//minimumcommonnumber 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  中
 

　　　　<linkhref="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css"rel="stylesheet"> 　　　　<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 　　 <scriptsrc="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script> 至此打包後的檔案大小已經變成了200多K， 還是不明白，cli腳手架中的預設webpack配置中，為啥沒有自動分離我的js和css，而是都打包到了app.js中