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等