webpack打包文件過大的優化，提取第三方庫（vue，ali-oss）到cdn，externals配置

問題產生原因：

vue或用其他第三方庫webpack打包導致某單文件js過大。

優化形式：

webpack的externals配置，從輸出的 bundle 中排除依賴。

可將第三方庫放到html用cdn加載。類似<script src="...."></script>

調試方式：

可參考vue-cli 腳手架生成的webpack配置。

可執行下面命令

npm run build --report  //不清楚可以百度（webpack-bundle-analyzer）

之後，瀏覽器 F12 看NetWork，各個資源加載時間。

參考：

webpack外部擴展(externals)

https://webpack.docschina.org/configuration/externals/

阿里oss的引入Browser.js SDK 方式

https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1360.5c3b18c9jpzU7N

具體代碼：

//webpack.base.conf.js

module.exports = {
  .......

  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'axios': 'axios',
    'ali-oss': 'OSS',
  },

  ........
}

//index.html

<!--vue cdn-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

<!-- axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<!--阿里雲 oss-->
<!-- 兼容IE的promise -->
<!-- <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script> -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.1.1.min.js"></script>

其他第三方UI庫同樣，element-ui，vant-ui等