vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化

1,关闭打包时生成的map文件

在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件

2,vue-router路由懒加载

懒加载的实现方式有很多种,这里简单说三种实现方法

  1. vue异步组件
  2. import()
  3. webpack的require.ensure()

vue 异步组件

vue异步组件技术也就是异步加载,vue-router配置路由,使用veu的异步加载技术,可以实现按需加载,但是这种情况下一个组件生产一个js文件

  1. /* vue异步组件技术 */
  2. {
  3.   path: '/index',
  4.   name: 'index',
  5.   component: resolve => require(['@/views/index'],resolve)
  6. }

使用import

组件懒加载方案二


  2. // 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
  3. const Home = () => import('@/components/home')
  4. const Index = () => import('@/components/index')
  5. // 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
  6. const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
  7. const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
  9. // router
  10. {
  11.   path: '/about',
  12.   component: About
  13. }, {
  14.   path: '/index',
  15.   component: Index
  16. }

webpack的require.ensure()

使用webpack的require.ensure()技术,也可以实现按需加载.这种情况下,多个路由指定相同的chunkName会合并打包成一个js文件

  1. /* 组件懒加载方案三: webpack提供的require.ensure() */
  2. {
  3.   path: '/home',
  4.   name: 'home',
  5.   component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
  6. }, {
  7.   path: '/index',
  8.   name: 'Index',
  9.   component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
  10. }

CDN引用

CDN可以减少代码体积加快请求速度,使用CDN主要解决两个问题,打包时间太长,打包后代码体积太大,请求很慢,还有就是回避服务器带宽问题

具体步骤

  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>vue-manage-system</title>
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  6.         <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
  7.         <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
  8.         <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  9.         <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
  10.         <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>

如果提示Element未定义,是因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式.

然后,修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见https://webpack.docschina.org/configuration/externals/)，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT

  1. module.exports = {
  2.    context: path.resolve(__dirname, '../'),
  3.    entry: {
  4.      app: './src/main.js'
  5.    },
  6.    externals: {
  7.      'vue': 'Vue',
  8.      'vue-router': 'VueRouter',
  9.      'ElementUI': 'ELEMENT',
  10.      'axios': 'axios',
  11.    }
  12.  }

然后删除原先的import,如果不删除原先的import，项目还是会从node_modules中引入资源。

也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。还是删了好。

参考文章列表:感谢大神们

vue页面首次加载缓慢原因及解决方案

vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案的更多相关文章

  1. angular懒加载机制 刷新后无法回退解决方案

    今天在项目中遇到一个很奇怪的问题,使用oclazyload来懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无 ...

  2. SSRS报表-级联筛选参数刷新后不能默认全选 -问题解决方案

    好久没有写博客了,最近更新完善修复了SSRS报表的一些问题,和大家分享. 问题描述: 报表中,区域->专区->省份->地级市 此四个筛选参数是联动的,在DataSet中前一父级参数作 ...

  3. Vuex 刷新后数据丢失问题 Typescript

    问题描述:Vuex保存的数据在页面刷新后会全部丢失清除 问题解决方案:使用sessionstorage进行保存,在页面刷新时保存至sessionStorage,页面在加载时再进行填充   (另有vue ...

  4. vue 页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别 ...

  5. vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载 ...

  6. vue移动端下拉刷新、上拉加载

    由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...

  7. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  8. updatepanel刷新后重新加载js脚本问题

    在页尾加 <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().a ...

  9. vue组件重新加载（刷新）

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

随机推荐

  1. jar 命令使用

    1.jar命令一般用来对jar包文件处理,jar包是由JDK安装目录\bin\jar.exe命令生成的,当我们安装好JDK,设置好path路径,就可以正常使用jar.exe命令,它会用lib\tool ...

  2. VR中的“寻路（wayfinding）”

    虚拟现实(VR)中很重要的一个问题就是Locomotion(用户在VR中的移动).这个Locomotion分为两种,一种是点对点的,如传送门的方式,一种是包含了可以操控的中间过程的,这种被称为“导航( ...

  3. MongoDB 学习笔记之 Nested doc/DBRef (Spark)

    Nested doc/DBRef (Spark) 实现: 运行结果:

  4. AlexNet模型的解析及tensorflow实现

    AlexNet是ImageNet LSVRC 2012比赛中分类效果第一的深度神经网络模型,点击链接下载论文http://papers.nips.cc/paper/4824-imagenet-clas ...

  5. 在Xamarin开发中，UWP环境下无法进入断点调试standard库的问题解决方案

    环境如下 选择的代码共享方案为standard模式 再多平台依赖注入的时候,断点一直提示没有加载文档. 进入到目标平台项目Debug文件夹下,查看.发现standard库引用进来后,对应的*.pdb文 ...

  6. PCA 算法核心：高维度向量向低维度投影

    Principal Component Analysis:主成分分析 步骤 5 步: 1.去平均值,也就是将向量中每一项都减去各自向量的平均值 2.计算矩阵的方差,协方差,特征值, 3,.把特征值从大 ...

  7. e课表项目第二次冲刺周期第一天

    昨天干了什么? 昨天与我们小组的成员商量了一个重大的决定,由于我们第一次冲刺周期的成果,就是我们决定我们要转型发展. 今天干了什么? 查阅相关的资料,我们正式决定要做一款学习的课程表APP,把简易作为 ...

  8. python-犯傻合集

    1.题目: 基于文件实现用户登录程序,提示用户输入用户名和密码,检查用户名是否存在,以及用户名密码是否正确 保存密码的文件叫user.txt,内容:   |  作分隔符 阶段一: 自己第一次的答案: ...

  9. java零碎知识（每种数据类型默认值，多大，取值范围）

    只要记下字节就好了 其它不必死记,取值范围:没有正负的,2的 字节数*8次方-1  , 凡是有正负的2的 (字节数*8)-1次方 -1 比如: 1.byte(有正负):先计算是2的几次方:字节数1*( ...

  10. 初学 Spring MVC(基于 Spring in Action)

    Spring MVC(Model-View-Controller) 当你看到本博文时,我猜你可能正面临着我已探索过的问题. 同其他博主一样,我先按照书上详细的介绍一下 Spring MVC,也是为了自 ...