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

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

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
网站不大但加载很慢怎么优化_博客网站首页加载优化
Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用,其他就是对接口优化等 1. ve ...
vue按需加载组件_微人事首页加载速度提高了 5 倍，我都做了什么？
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找.里边提到的几种方案,大家都可以对照着视频试一下」 ElementUI 按需加载: 服务端开启 ...
记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
angular 首屏加载优化_[转]Angular4首页加载慢优化之路
Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能.在Web开发前后端流行的今天,我们在某个项目中也尝试使用该框架. 很快按照官网上的例 ...
h5首页加载慢_Webview加载H5优化小记
Webview加载H5优化小记行到水穷处,坐看云起时原文链接一.概述 1.背景鉴于H5的优势,客户端的很多业务都由H5来实现,Webview成了App中H5业务的唯一载体. WebView组件 ...
Vue首页加载过慢解决方案
Vue首页加载过慢解决方案参考文章: (1)Vue首页加载过慢解决方案 (2)https://www.cnblogs.com/annie211/p/10825568.html 备忘一下.
vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

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

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

最新文章

热门文章