一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    vue线上项目加载速度提升

    技术 165 2022-02-17 17:45

    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>
    

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


    文章评论

    评论列表(0