1）路由懒加载
    2）vue-cli开启打包压缩 和后台配合 gzip访问
    3）进行cdn加速
    4）开启vue服务渲染模式
    5）用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小
    6）在生产环境中删除掉不必要的console.log

    1. plugins: [
    2.     new webpack.optimize.UglifyJsPlugin({ //添加-删除console.log
    3.       compress: {
    4.         warnings: false,
    5.         drop_debugger: true,
    6.         drop_console: true
    7.       },
    8.       sourceMap: true
    9.     }),

    7）开启nginx的gzip ,在nginx.conf配置文件中配置

    1. http {  //在 http中配置如下代码，
    2.    gzip on;
    3.    gzip_disable "msie6"; 
    4.    gzip_vary on; 
    5.    gzip_proxied any;
    6.    gzip_comp_level 8; #压缩级别
    7.    gzip_buffers 16 8k;
    8.    #gzip_http_version 1.1;
    9.    gzip_min_length 100; #不压缩临界值
    10.    gzip_types text/plain application/javascript application/x-javascript text/css
    11.     application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    12.  }

    8）添加loading效果，给用户一种进度感受

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    6.   <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    7.   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.   <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1112431_q8oa3yvrwbh.css">
    9.   <title>demo</title>
    10.   <style>
    11.     .spinner {
    12.       margin: 100px auto;
    13.       width: 50px;
    14.       height: 60px;
    15.       text-align: center;
    16.       font-size: 10px;
    17.     }
    19.     .spinner > div {
    20.       background-color: #FE3C71;
    21.       height: 100%;
    22.       width: 6px;
    23.       display: inline-block;
    24.       -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
    25.       animation: stretchDelay 1.2s infinite ease-in-out;
    26.     }
    28.     .spinner .rect2 {
    29.       -webkit-animation-delay: -1.1s;
    30.       animation-delay: -1.1s;
    31.     }
    33.     .spinner .rect3 {
    34.       -webkit-animation-delay: -1.0s;
    35.       animation-delay: -1.0s;
    36.     }
    38.     .spinner .rect4 {
    39.       -webkit-animation-delay: -0.9s;
    40.       animation-delay: -0.9s;
    41.     }
    43.     .spinner .rect5 {
    44.       -webkit-animation-delay: -0.8s;
    45.       animation-delay: -0.8s;
    46.     }
    48.     @-webkit-keyframes stretchDelay {
    49.       0%, 40%, 100% {
    50.         -webkit-transform: scaleY(0.4)
    51.       }
    52.       20% {
    53.         -webkit-transform: scaleY(1.0)
    54.       }
    55.     }
    57.     @keyframes stretchDelay {
    58.       0%, 40%, 100% {
    59.         transform: scaleY(0.4);
    60.         -webkit-transform: scaleY(0.4);
    61.       }
    62.       20% {
    63.         transform: scaleY(1.0);
    64.         -webkit-transform: scaleY(1.0);
    65.       }
    66.     }
    67.   </style>
    68. </head>
    69. <body>
    70. <noscript>
    71.   <strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    72. </noscript>
    73. <div id="app">
    74.   <div class="spinner">
    75.     <div class="rect1"></div>
    76.     <div class="rect2"></div>
    77.     <div class="rect3"></div>
    78.     <div class="rect4"></div>
    79.     <div class="rect5"></div>
    80.   </div>
    81. </div>
    82. <!-- built files will be auto injected -->
    83. </body>
    84. </html>

    其他loading样式：