vue项目优化及首页白屏过渡

最近搞项目优化 也是很头大 所以做一个记录 不是很全慢慢补吧！！！

!!!入口文件(main.js)注意 组件的按需引入 避免入口文件过大

!!!注意代码复用性

1.组件动态导入

• 原始导入：

//导入：
import home from "./component/home"
//注册：
component：{home}

• 动态导入：（按需加载）

components:{home:()=>import("./component/home")}

2. 路由懒加载

• Vue是单页面应用，路由较多，Webpack打包后文件很大。首页加载时可能会出现白屏现象，用户体验差。
• 懒加载是当路由被访问的时候才加载对应组件，减少资源占用，提高页面反应速度

{
    path: '/login',
    name: 'login',
    component: resolve => require(['@/views/login'], resolve)
    //或
    //component: () => import('@/views/login')
}

2. 图片懒加载

• 将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。能有效提高加载性能和用户体验。
• 使用vue-lazyload插件来实现图片懒加载

//安装
npm install vue-lazyload --save-dev

//在入口文件中引入插件并使用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

//将文件中 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示
<img v-lazy="/static/img/logo.png"/>

3. CDN的使用
（vue cli3也可以打包加 vue-cli-service build --report 生成report.html 查询文件大小占比）

• 加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。

• CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

• （！注意）使用cdn 引入 就不需要在在入口文件去import导入和 vue.use(ElementUI)
  index.html引入：

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
  

  vue.config.js中通过externals外部扩展，可以忽略不需要打包的库：

  module.exports = {
    configureWebpack: config => ({
      externals: {
        'vue': 'Vue',
        'element-ui': 'ElementUI'
      }
   })
  }
  

4. 1 打包优化 — 工程文件打包的时候不生成.map文件

• npm run build编译之后，会生成很多.map文件，这些文件占了不小的空间。.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，所以上线时可以不生成.map文件。
  修改配置文件如下即可：（vue.config.js）

  module.exports = {
  	productionSourceMap: false
  }
  

4. 2 打包优化 — gzip压缩
gzip压缩配置（vue + nginx）

5. 首屏加过渡动画
优化首页白屏问题

• public 的 index.html :

<div id="loader-wrapper">
    <div id="loader"></div>
     <div class="loader-section section-left"></div>
     <div class="loader-section section-right"></div>
     <div class="load_title" id="load_title"></div>
 </div>
 <script type="text/javascript">
	let name = "测试"
    const name = document.getElementById('load_title')
    name.innerHTML = "正在加载" + name  + "系统,请耐心等待..."
  </script>

• public 的 新建 index.css

html,body,#app{height:100%;margin:0;padding:0}.chromeframe{margin:.2em 0;background:#ccc;color:#4ea3fb;padding:.2em 0}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#4ea3fb;-webkit-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#4ea3fb;-webkit-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;-o-animation:spin 3s linear infinite;-ms-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#4ea3fb;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;-ms-animation:spin 1.5s linear infinite;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#fff;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}.no-js #loader-wrapper{display:none}.no-js h1{color:#222}#loader-wrapper .load_title{font-family:'Open Sans';color:#4ea3fb;font-size:36px;width:100%;text-align:center;z-index:9999999999999;position:absolute;top:60%;opacity:1;line-height:30px}#loader-wrapper .load_title p{height:50px;padding-top:10px;font-weight:normal;font-style:italic;font-size:26px;color:#4ea3fb;opacity:.8}