vue避免不了的问题：首屏加载优化

1.使用webpack的externals优化

在webpack.base.conf.js中添加：

externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'axios': 'axios',
    'vue-router': 'VueRouter'
    '依赖包名':'cdn全局变量名'
  }

在index.html中添加cdn链接

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

可减小主js文件的体积（外链文件多大就可以减少多大的体积，但也会增加外链加载时间，最好对比一下是否在加载时间上有所提升再进行外链插入）

2.路由懒加载（按需加载）

前：

import myServiceWrap  from '@/page/center/myService/myServiceWrap'

后：

const myServiceWrap = () => import('@/page/center/myService/myServiceWrap')

3.gzip压缩

config/index.js文件：

//在build里有则修改无则添加
productionGzip: true,
productionGzipExtensions: ['js','css']

build/webpack.prod.conf.js文件：
插件compression-webpack-plugin使用：https://www.npmjs.com/package/compression-webpack-plugin

//在build里有则修改无则添加
if (config.build.productionGzip){
  const CompressionPlugin = require('compression-webpack-plugin');
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      minRatio: 0.8,
      test: /\.(js|css)$/i,
      threshold: 10240,
    })
  )
}

Nginx 开启 gzip
参考链接：https://blog.csdn.net/u012392251/article/details/80696741
文件路径：nginx -> conf -> nginx.conf

http:{ 
      gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
                 image/gif image/png;
  }

主要是：gzip on; 和 gzip_types （配置了gzip感觉速度翻了好几倍，加载文件减小5倍及以上，就这个feel倍儿爽）

4.不生成.map(无速度优化，可以减少上传服务器的文件体积)

.map作用
在打包出错时，会告诉你具体错误位置
去除.map
在config/index.js中把build中的productionSourceMap改为false