博主最近发现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）

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

  1. vue cli3 项目优化

    vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...

  2. Vue优化首页加载速度 CDN引入

    https://blog.csdn.net/blueberry_liang/article/details/80134563

  3. vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  4. 如何对vue项目进行优化，加快首页加载速度

    上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载 ...

  5. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  6. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  7. vue-router中，require代替import解决vue项目首页加载时间过久的问题

    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...

  8. vue性能优化1--懒加载

    懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...

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

    本文转自:https://blog.csdn.net/itest_2016/article/details/80048398 Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路 ...

随机推荐

  1. Python手动安装 package

    https://pypi.python.org/pypi 下载 解压 进入setup.py的目录 python setup.py build python setup.py install

  2. 在VS中对WCF服务进行更新，但是配置文件没有更新解决办法

    取消下面的勾选框

  3. 【技巧】断点调试你的express项目

    目录(?)[-] 写在前面 node-inspector 全局安装node-inspector 以debug模式开启express服务 启动node-inspector 调试NodeJS程序   写在 ...

  4. [51nod1065]最小正子段和

    题意:求一个序列中大于0的最小子段和. 解题关键: 先求出前缀和和,对于每个位置求某个位置到当前位置和大于1的和的最小值.然而这是复杂度是O(n^2)的.其实可以通过排序优化到O(nlogn).对前缀 ...

  5. Swoole 协程 MySQL 客户端与异步回调 MySQL 客户端的对比

    Swoole 协程 MySql 客户端与 异步回调 MySql 客户端的对比 为什么要对比这两种不同模式的客户端? 异步 MySQL 回调客户端是虽然在 Swoole 1.8.6 版本就已经发布了, ...

  6. C# 生成word 文档 代码 外加 IIS报错解决方案

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. 反射学习：（System.Reflection）

    反射为了动态(运行时动态) 原理:读取metadata(?)   Assembly assembly = Assembly.Load("TestReflections");//反射 ...

  8. PHP之递归函数

    https://www.cnsecer.com/4146.html http://www.jb51.net/article/71424.htm //一列数字的规则如下:1,1,2,3,5,8,13,2 ...

  9. Codeforces Round #459 (Div. 2)The Monster[匹配问题]

    题意 给一个序列,包含(,),?,?可以被当做(或者),问你这个序列有多少合法的子序列. 分析 n^2枚举每一个子序列,暂时将每个?都当做右括号,在枚举右端点的时候同时记录两个信息:当前左括号多余多少 ...

  10. MySQL学习中，遇到的问题记录

    一.安装mysql时,报错:1045 原因:因为之前安装过mysql,之后再安装会出现这个问题. 解决: 删除之前的残留就好了 方法:清除mysql之前的历史残留