第一次打包项目首屏加载损耗了几十S。
解决：

1.采用的是懒加载的方式：

2.开启gzip压缩，文件传输的模式

  • gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
  • webpack打包时借助 compression webpack plugin实现gzip压缩，安装插件如下：

npm i -D compression-webpack-plugin

  • 在vue cli 3.0 ,vue.config.js配置如下：

    1. const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
    2. module.exports = {
    3. configureWebpack: {
    4.   plugins:[
    5.     new CompressionPlugin({//gzip压缩配置
    6.       test:/\.js$|\.html$|\.css/,//匹配文件名
    7.       threshold:10240,//对超过10kb的数据进行压缩
    8.       deleteOriginalAssets:false,//是否删除原文件
    9.     })
    10.   ],
    11. },
    12. }

  • 服务器你nginx开启gzip:

    1. gzip on;
    2. gzip_disable "msie6";
    3. gzip_vary on;
    4. gzip_proxied any;        
    5. gzip_comp_level 6;  #压缩级别:1-10，数字越大压缩的越好，时间也越长        
    6. gzip_buffers 16 8k;         
    7. gzip_http_version 1.1;         
    8. gzip_min_length 256;  #gzip压缩最小文件大小，超出进行压缩（自行调节）        
    9. gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml            application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

    3.依赖模块采用第三方cdn资源

    -首页index.html引入
    image.jpeg
    -
    image.jpeg
    image.jpeg
    image.jpeg
    出现问题 app.js还是很大 首屏引入的资源 svg有个过大的文件 注意首屏引入的资源大小
    整个流程跑通后 首屏加载有了质的飞跃 3s
    https://juejin.im/post/5a291092518825293b50366d
    echarts: https://www.cnblogs.com/zhaoxiaoying/p/10971925.html
    若首屏为登录页，可做成多入口：
    https://segmentfault.com/a/1190000016155447?utm_source=tag-newest

    4.预渲染

    用到的插件：prerender-spa-plugin
    yarn add prerender-spa-plugin -D
    or npm install prerender-spa-plugin --save-dev

    vue.config.js中配置：

    1. const PrerenderSpaPlugin = require('prerender-spa-plugin');
    2. const Render = PrerenderSpaPlugin.PuppeteerRenderer;
    3. const path = require('path');
    4. configureWebpack: () => {
    5. if (process.env.NODE_ENV !== 'production') return;
    6. return {
    7.   plugins: [
    8.     new PrerenderSPAPlugin({
    9.       // 生成文件的路径，也可以与webpakc打包的一致。
    10.       // 下面这句话非常重要！！！
    11.       // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
    12.       staticDir: path.join(__dirname, 'dist'),
    13.       // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
    14.       routes: ['/', '/Login', '/Home'],
    15.       // 这个很重要，如果没有配置这段，也不会进行预编译
    16. renderer: new Renderer({
    17.         inject: {
    18.           foo: 'bar'
    19.         },
    20.         headless: false,
    21.         // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    22.         renderAfterDocumentEvent: 'render-event'
    23.       })
    24.     })
    25.   ]
    26. };
    27. },

    main.js中配置：

    1. new Vue({
    2. router,
    3. store,
    4. render: h => h(App),
    5. // 添加mounted，不然不会执行预编译
    6. mounted () {
    7. document.dispatchEvent(new Event('render-event'))
    8. }
    9. }).$mount('#app')

问题：预渲染解决百度搜索引擎抓爬不到单页面子链接问题。可以把需要seo页面 写在页面中 隐藏起来。
首页加载一般进入的是路由首页，可以通过nginx配置，指向预渲染的首页静态页
nginx配置如下：

  1. location = / {
  2.         root    /data/release/pokio_web/client/dist;
  3.         try_files /home/index.html /index.html;
  4.     }
  6.     location / {
  7.         root    /data/release/pokio_web/client/dist;
  8.         try_files $uri $uri/ /index.html;
  9.     }

预渲染根路由
通常情况下，动态路由如 /users/:id 不会配置预渲染，因为你没法枚举出所有的 User ID。访问动态路由时，服务器会返回根路由 / 的 html，所以根路由也不适合做预渲染。但根路由往往是一个网站的首页，是访问量最大的一个路由。通过一些 nginx 可以解决这个问题。
用户访问 / 路由，实际上是访问了 /home/index.html，用 router 中配置的 /home 作为首页。/index.html 可以作为其他没有匹配到路由的响应。
参考链接：
https://blog.csdn.net/wangshu696/article/details/80927561单页应用多路由预渲染指南
https://blog.csdn.net/yanby921005/article/details/83070274vue项目seo（prerender-spa-plugin预渲染）

5.vue中使用vue-meta-info

1.安装 yarn add vue-meta-info —save

2.使用

在main.js中引入

  1. import MetaInfo from 'vue-meta-info'
  2. Vue.use(MetaInfo);

在组件内使用：

  1. export default {  
  2.   metaInfo: {
  3.     title: 'My Example App', // set a title     
  4.     meta: [{ 
  5.       // set meta
  6.       name: 'keyWords',       
  7.       content: 'My Example App'     
  8.     }],    
  9.     link: [{ 
  10.       // set link       
  11.       rel: 'asstes',       
  12.       href: 'https://assets-cdn.github.com/'     
  13.     }]   
  14.   } 
  15. }

因为本人工作需求只需在首页使用meta name为description属性，所以用法如下：

  1. metaInfo() {
  2.     if (this.$route.name == 'home') {
  3.       return {
  4.         meta: [{
  5.           name: 'description',
  6.           content: 'Join Pokio Now:Online Licensed  Real Money Casino Card Game, The 1st fully regulated casino mobile poker app by Malta Gaming Authority Variety of Games at Pokio: Texas Hold’em, Omaha, PLO 5 and OFC. Play cash games, SNG and MTT here！'
  7.         }]
  8.       }
  9.     }
  10.   },

可以根据变量信息在每个组件使用不同的meta信息。