vue线上项目加载速度提升

1.通过把一些资源改成cdn
首先在index.js里面引入一些cnd资源（vue,vueRoute,elementUI）

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

<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>

复制代码
完事，用户体验蹭一下起来了

作者: Bill 本文地址: http://biaoblog.cn/info?id=1645091110844

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！