Vue页面首次载入优化的全过程

 更新时间:2021年12月01日 09:25:00   作者:一尾流莺  
凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题,下面这篇文章主要给大家介绍了关于Vue页面首次载入优化的相关资料,需要的朋友可以参考下

前言

今天是把自己开发的博客系统发布到了线上,但就只是把build出来的dist文件夹随便扔在了云服务器根目录下,导致在首次进入页面的时候非常的慢.所以需要进行优化.

优化前的大小

1.图片优化

之前为了方便开法,背景图片直接在assets里面扔了一个jpg,导致加载这张图片的时候就用了十几秒,于是乎我就把图片上传空间了,然后改用网络地址.

2.禁止生成.map文件

build出来的dist文件夹里面有很多的.map文件,这些文件主要是帮助线上调试代码,查看样式.由于基本都是本地调试好,线上不需要怎么修改,所以就禁止生成这些文件.

在vue.config.js里面加上这句.

3.路由懒加载

\

4.cdn引入公共库

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    //cdn引入
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios'
        }
    }

网上说可以把import注释掉,亲自操作会报错,也有资料说不用注释也不会打包

一顿操作最后的文件,效果显著,app.js还是很大

5.终极法宝 GZIP压缩

做完这个感觉前四步都是小菜一碟,直接把1.4m的app.js干成一百多kb,其他的都不足挂齿了

 configureWebpack: config => {
        return {
            //配置cdn
            externals: {
                'vue': 'Vue',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios'
            },
            //配置gzip压缩
            plugins: [
                new CompressionWebpackPlugin({

                    test: new RegExp('\.(js|css)$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            ],
        }
    }

服务端也要配,不然不认识GZIP文件

//配置GZIP压缩模块
const compression = require('compression');
//在所有中间件之前引入
app.use(compression());

最垃圾的服务器通过以上几个优化,一样飞起来了!!!

对比一下,结果显而易见!!!

6.利用vue-router进行页面的懒加载(lazy load)

这里的页面的懒加载是指,假如我现在访问A页面,只会去请求A页面里的东西,其他页面的东西不会去请求。

具体怎么做,vue-router的官网都写得很清楚了,有需要的去看一下就懂了:

通过vue-router实现页面的懒加载

总结

到此这篇关于Vue页面首次载入优化的文章就介绍到这了,更多相关Vue页面首次载入优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解vue mixins和extends的巧妙用法

    详解vue mixins和extends的巧妙用法

    vue提供了mixins、extends配置项,最近使用中发现很好用。下面小编通过本文给大家介绍下vue中 mixins和extends的巧妙用法,需要的朋友参考下吧
    2017-12-12
  • Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,这篇文章主要给大家介绍了关于Vue项目如何保持用户登录状态的相关资料,localStorage+vuex刷新页面后状态依然保持,需要的朋友可以参考下
    2022-05-05
  • Vue中ref的用法及演示

    Vue中ref的用法及演示

    这篇文章主要介绍了Vue中ref的用法及演示,ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上,下面来看看文章的详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue中控制mock在开发环境使用,在生产环境禁用方式

    vue中控制mock在开发环境使用,在生产环境禁用方式

    这篇文章主要介绍了vue中控制mock在开发环境使用,在生产环境禁用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中axios防止多次触发终止多次请求的示例代码(防抖)

    vue中axios防止多次触发终止多次请求的示例代码(防抖)

    这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法(防抖),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue项目tween方法实现返回顶部的示例代码

    vue项目tween方法实现返回顶部的示例代码

    这篇文章主要介绍了vue项目tween方法实现返回顶部,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 在浏览器console中如何调用vue内部方法

    在浏览器console中如何调用vue内部方法

    这篇文章主要介绍了在浏览器console中如何调用vue内部方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue实现简单的发表评论功能

    Vue实现简单的发表评论功能

    这篇文章主要为大家详细介绍了Vue实现简单的发表评论功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    解决VUE框架 导致绑定事件的阻止冒泡失效问题

    下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue中通过minio上传文件的详细步骤

    Vue中通过minio上传文件的详细步骤

    最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07

最新评论