vue-cli3项目优化首页加载过慢的一些心得

博主最近发现vue-cli3项目做完后,点击首页加载时间好久啊,一般都要3-5s。这样的加载时间博主自己都受不了,所以就有了这个随笔,将自己的一些研究心得分享给大家。

  • 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer,这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大,我可以对echarts、momentjs采用cdn方式引入
  • 在vue-cli3中采用cdn方式引入
    1. 推荐给大家我所用的cdn网址--bootcn,当然,大家也可以选用其他的cdn网址如(cdnjs,unpkg)。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
    2. cdn的引入和普通的script引入方式一致。如下图
    3. 除了在index.html中引入,还需要将对应的引入写入到vue的配置问件中
    4. 在页面调用中用 import 导入即可。列如(import echarts from "echarts")
  • 除了将第三方文件用cdn方式引入,我们项目中的大图片也需要做一下无损压缩
  • 路由采用懒加载(按需引入方式)
    component: () => import( /* webpackChunkName: "about" */ ‘./views/login.vue‘)
    

      

  • 最后是服务器配置gzip(gzip

原文地址:https://www.cnblogs.com/XCWebLTE/p/10141997.html

时间: 2024-10-27 12:26:18

vue-cli3项目优化首页加载过慢的一些心得的相关文章

vue cli3 项目优化

vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容. 默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import()按需 code splitting 的产物) 自动生成 prefetch 提示. 这些提示会被 @vue/preload-web

vue项目首屏加载优化实战

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页

[转]Angular4首页加载慢优化之路

本文转自:https://blog.csdn.net/itest_2016/article/details/80048398 Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能.在Web开发前后端流行的今天,我们在某个项目中也尝试使用该框架. 很快按照官网上的例子搭建了一个标准工程,在项目初期工程文件不是很多的时候,编译.打包.然后运行,访问项目的各个页面都很快.和传统的模板引擎相比这种前后端分离不仅工程化更加成熟(前端.后端开发人

vue性能优化1--懒加载

懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 组件懒加载比如我有个test组件,里边内容颇多,我按照正常非懒

Android进阶:ListView性能优化异步加载图片 使滑动效果流畅

ListView 是一种可以显示一系列项目并能进行滚动显示的 View,每一行的Item可能包含复杂的结构,可能会从网络上获取icon等的一些图标信息,就现在的网络速度要想保持ListView运行的很好滚动流畅是做不到的 所以这里就需要把这些信息利用多线程实现异步加载 实现这样功能的类 [java] view plaincopy public class AsyncImageLoader { private HashMap<String, SoftReference<Drawable>&

切图崽的自我修养-优化图片加载流程

前言 优化! 又是优化! 切图崽们作为整个web应用的纽带,连接着用户行为和机器性能. 而优化的最终意义,在于在这两者之间取得一个最佳的平衡点. 对于图片资源的加载来说,更是如此. 今天我们就来简单说说,项目开发中常见的图片加载优化方式. 预加载 1.遮罩大法 我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调,只是完成了DOM树的构建. 诸如Css的渲染以及页面内图片等资源的下载不一定完成了.所以如果此时呈现页面,页面会非

优化网站加载速度的14个技巧

本文为转载,原作者版权声明在最下方.个人觉得总结的很好 优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键. 下面我将介绍几个优化网站加载网页速度的简单方法,一起来看一下. 1.服务器响应时间 即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果.当涉及到提高网站的速度,服务器响应时间起着重要的作用.下面是一些提高服务器响应时间的小贴士. ●有独立的服务器,而不是选择

vs2010导入项目出现未加载问题

昨天帮别人写了个.net的程序,拷贝到别人电脑时出现错误,说有些项目不可用,错误提示如下图.这个程序是我在网上下载的代码基础上修改的,自己以前写的程序没有出现过这种情况. 由错误提示发现这个是由于路径错误导致的,然后就在项目里搜索这个路径在哪里引用了,结果发现是在我生成是xx.sln文件中被多次引用,看来是sln文件生成有问题. 出错原因分析:这个是我从网上下载的一个网站源码,源码中没有生成解决方案的以及xx.sln文件,我就将其以网站的形式导入vs中,然后对其进行修改,完成后保存解决方案并生成

html5体验优化页面加载的14条建议

html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速目标:首屏 3s 以内因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度. 方案:- 避免页面长时间白页,页面渲染只需要完整的HTML 以及 CSS- 加载结束后页面第一屏便渲染结束,然后再异步加载js- 静态资源不使用 cookie- 优化加载顺序 css头.js尾 2. 降低请求「数」- 将可合并的 CSS.JS 文件合并-