vue -- webpack打包体积大导致网站加载速度慢的解决方案

参考：https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/

首先，在写 Vue 的时候，应该采用懒加载模式，之后生成的包，就会被打入到不同分组的 js，运行时按需加载，详情见：Vue-路由懒加载；这个意义重大！

const GetTrx = () => import('@/pages/single/getTrx/GetTrx');
//or
const GetTrx = resolve => require(['@/pages/single/getTrx/GetTrx'], resolve);

然后外部引入模块(CDN)，然后在 webpack 配置中指定 externals

//index.html
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

//webpack.base.conf.js
externals:{
    'vue': 'Vue',
    'iview': "iView",
    "axios": "axios"
  },

vue-cli的webpack配置，应该是将所有的库打包到了vendor中，引用的库太多时，vendor的体积会很大，有办法控制打包的体积超过一定值时，分成多个文件打包吗？或者通过配置将部分库抽离出来，打包成另外的文件。

在做vue项目打包，打包之后js中，会自动生成一些map文件，怎么把它去掉不要呢？
运行 cnpm run build 开始打包后会在项目目录下自动创建dist目录，打包好的文件都在其中
解决办法：去src/config/index.js中改一个参数：

productionSourceMap:false 

把这个改为false。不然在最终打包的文件中会出现一些map文件

map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

使用vue-cli生成的项目，会自动配好相关的设置。
到对应的文件，productionGzip改为true，开启Gzip压缩
解决办法：src/config/index.js中改一个参数：

productionGzip:true

webpack.prod.conf.js

CompressionWebpackPlugin的设置由
asset: '[path].gz[query]'
改为
filename: '[path].gz[query]'

需要后台开启支持gzip