1.通过把一些资源改成cdn

首先在index.js里面引入一些cnd资源（vue,vueRoute,elementUI）

js 里面加了备用服务器的资源

<!-- 引入 cdn 资源 -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script>
      //<![CDATA[
      if (typeof Vue == "undefined") {
        document.write(
          unescape(
            "%3Cscript src='https://cdn.staticfile.org/vue/2.6.10/vue.min.js' %3E%3C/script%3E"
          )
        );
      } //]]>
    </script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

    <script>
      //<![CDATA[
      if (typeof VueRouter == "undefined") {
        document.write(
          unescape(
            "%3Cscript src='https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' %3E%3C/script%3E"
          )
        );
      } //]]>
    </script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
    <script>
      //<![CDATA[
      if (typeof ELEMENT == "undefined") {
        document.write(
          unescape(
            "%3Cscript src='https://cdn.staticfile.org/element-ui/2.10.1/index.js' %3E%3C/script%3E"
          )
        );
      } //]]>
    </script>

css

    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

完事后在main.js中 把一些Import的资源取消

// import Vue from "vue";
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";

注意的是 通过cdn资源引用的vue-router的名称变成：VueRouter
原来就叫Router

然后还需要在webpack.base.conf.js中配置（跟entry同级）

  externals: {
    vue: "Vue",
    "vue-router": "VueRouter",
    "element-ui": "ELEMENT"
  },

CND的就这么多

2.路由懒加载设置 import

然后就是路由的懒加载设置：

        {
          path: "/mager_mood",
          name: "mager_mood",
          component: mager_mood,
        },

改为：

        {
          path: "/mager_mood",
          name: "mager_mood",
          component: () => import("@/xxx/xxxx/mager_mood")
        },

3.设置首屏加载图片

设置了这么多 速度快了很多 但是首次加载进来依然会有白屏的情况

没关系 我们设置一个首屏图片即可：

在最外层的index.html的app里面：添加

   <div id="app">
      <style>
        #firstScreenPage {
          width: 100vw;
          height: 100vh;
          background-color: white;
          position: relative;
          top: 0;
          left: 0;
          z-index: 999;
          text-align: center;
          font-size: 20px;
        }

        #firstScreenPage img {
          margin: auto;
          padding: 100px;
          width: 500px;
          display: block;
        }
      </style>
      <div id="firstScreenPage">
        <img src="./static/loading2.gif" alt="" />
      </div>
    </div>

完事，用户体验蹭一下起来了