解决vue项目首次加载过慢的问题

2024-09-07

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

第一次打包vue的项目部署到服务器,发现首次加载特别的缓慢要几十秒才加载出来,完全没有在本地开发环境上那么流畅. 主要原因是页面在打包后没有进行相关的配置导致资源文件特别大,一次想要全部加载完成回特别的耗时. 下面是总结的vue项目性能优化的方案一:vue-router 路由懒加载在使用同步的方式加载组件的时候,首屏加载会对网络资源加载比较多,资源比较大,加载速度比较慢,所以设置路由懒加载,按需加载会加速首屏的渲染. 但是在设置懒加载之后,实现按需加载,那么项目打包不会把所有js打包进ap

vue-router路由懒加载（解决vue项目首次加载慢）

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

vue项目首次加载过慢

vue项目优化浅谈 Vue 项目优化关于vue在app首次加载缓慢的解决办法 nginx开启缓存在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名称为cache_one,内存缓存空间大小为500M,缓存的数据超过1天没有被访问就自动清除;访问的缓存数据,硬盘缓存空间大小为30G proxy_cache_path /usr/local/nginx/proxy_cache_path levels=: keys_zone=cache_one:500

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

vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢,而用require会将component分别打包成不同的js,按需加载,访问此路由时才会加载这个js,所以就避免进入首页时加载内容过多. require: 运行时调用,理论上可以运用在代码的任何地方,import:编译时调用,必须放在文件开头示例: import写法: import use

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

第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时.这里简单总结一下自己用到的一些优化的方案. 首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大. 解决方案一 1,去掉编译文件中map文件.在编译好后,我们会看到文件夹下有特别多的

在Vue项目中加载krpano全景图

在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问题,下面跟大家分享一下做法. 首先, 在vue的路由页面中加载动态的js插件,需要等待JS文件加载完成之后,才能使用JS插件中的方法来加载全景图: // 加载动态JS文件 var _doc = document.getElementsByTagName('head')[0]; var js = do

vue项目未加载完成前显示loading...

1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <link rel="icon" href="/favicon.ico" mce_href="/favicon.ic

解决一个项目里面加载两个同名不同版本的DLL的问题

在config里面这样配置,可以加载不同版本的dll <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="Microsoft.Practices.Prism.MefExtensions" culture="neutral" publi

三步解决 vue 按需加载

1 webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js " 这一步是配合第三步, 生成每个路由页面需要的(被压缩过得js) 2 webpack 的 plugins 配置 [ new webpack.optimize.commonChunkPlugin('common.js') ] 3 vue 的 component : function(resovle){ requrie( [ '...路

vue--按需加载的3种方式（解决网页首次加载速度慢的问题）

一.vue的异步组件加载使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中: {path: '/index', name: 'index', meta:{ title:'首页', requireAuth:true }, /*这是异步加载组件,当你访问时 ,才会加载 ,vue-router中,require代替import解决vue项目首页加载时间过久的问题*/ component: resolve => { clearTimeout(_pageTimer); //这里是设置定时

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

# vue 首次加载缓慢/刷新后加载缓慢原因及解决方案最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打包时生成的map文件在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件 2,vue-router路由懒加载懒加载的实现方式有很多种,这里简单说三种实现方法 vue异步组件 import() webpack的require.e

vue单页应用首次加载太慢之性能优化

问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是因为我打包的时候把所有第三方依赖都打包放进去了:要怎么分离出去呢, 看下面步骤: 一.解决打包后vendor.js 很大,导致上线后页面首次加载速度异常慢: vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于

vue cli3.0 首次加载优化

项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记运行report脚本可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然后首次加载不需要用到的插件可不用在main.js中引入 "dev": "vue-cli-service serve", "pro": "vue-cli-service serve --open --mode production"

vue超简单加载字体方法,解决scss难加载字体的问题

vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法在App.vue的style标签下引入字体文件后,scss设置的字体依旧可以正确识别,注意style的lang不要写,就使用原生css 示例引入 <style> @font-face{ font-family: pingfang; src: url('./style/pingfang.ttf') } </style> 然后想要的位置

Vue 动态图片加载路径问题和解决方法

最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面是核心组件代码: <el-tree :data="data" class="tree-view" node-key="id" :props="defaultProps" @node-click="click&quo

vue组件懒加载

vue2组件懒加载浅析一. 什么是懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 1

vue 里面异步加载高德地图

前言关于Vue 里面使用异步加载高德地图项目中其实只有几处需要用到地图,不需要全局引入在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不够优雅. 解决方案 1.创建一个AMap.js,路径'utils/AMap' export default function MapLoader () { // <-- 原作者这里使用的是module.exports return new Promise((resolve, reject) =>

RequireJS首次加载偶尔失败

现象:第一次加载JS文件,首次加载偶尔失败: 原因:require(['jquery', 'operamasks', 'zTree', 'jQueryCookie'],中前后引用同步加载: 解决方式:shim声明前置加载: 配置如下: require.config({ baseUrl: 'js', paths: { jquery: 'lib/jquery/jquery.min', operamasks: 'lib/operamasks/operamasks-ui.min', zTree: 'li

Vue按需加载提升用户体验

Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染. 原图文来自http://www.cnblogs.com/Kummy/p/5254754.html vue 按需加载相关文章: 1: http://cn.vuejs.org/guide/components.html#异步组件 2

vue 路由懒加载使用，优化对比

vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长! 如何实现? ------------------正常用法 // import Login from 'login/Login' // i

解决vue项目首次加载过慢的问题

热门专题