Vue首屏加载速度优化，提升80%以上

       在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子：

       这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示：

我们先来分析下前端加载速度慢原因

1. 首先安装webpack的可视化资源分析工具，命令行执行：

npm i webpack-bundle-analyzer -D

2. 然后在webpack的dev开发模式配置中，引入插件，代码如下：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
    new BundleAnalyzerPlugin()
]

3. 最后命令行执行npm run build --report , 浏览器会自动打开分析结果，如下所示：

有针对性的优化方案

一、对于第三方js库的优化，分离打包

       生产环境是内网的话，就把资源放内网，通过静态文件引入，会比node_modules和外网CDN的打包加载快很多。如果有外网的话，可以通过CDN方式引入，因为不用占用访问外网的带宽，不仅可以为您节省流量，还能通过CDN加速，获得更快的访问速度。但是要注意下，如果你引用的CDN 资源存在于第三方服务器，在安全性上并不完全可控。

        目前采用引入依赖包生产环境的js文件方式加载，直接通过window可以访问暴露出的全局变量，不必通过import引入，Vue.use去注册

        在webpack的dev开发配置文件中, 加入如下参数，可以分离打包第三方资源包，key为依赖包名称，value是源码抛出来的全局变量。如下图所示，可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库，尽量采用按需引入的方式。

externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
}

二、vue-router
使用懒加载

       在访问到当前页面才会加载相关的资源，异步方式分模块加载文件，默认的文件名是随机的id。如果在output中配置了chunkFilename，可以在component中添加WebpackChunkName，是为了方便调试，在页面加载时候，会显示加载的对应文件名+hash值，如下图：

{
    path: '/Login',
    name: 'Login',
    component: () = >import( /* webpackChunkName: "Login" */  '@/view/Login')
}

const CompressionWebpackPlugin = require('compression-webpack-plugin')

plugins: [ new CompressionWebpackPlugin() ]