vue 加载太慢_Vue首页加载过慢 解决方案

一、什么导致了首页初步加载过慢:app.js文件体积过大

二、解决方法:

1、Vue-router懒加载

vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。

路由懒加载写法:

非懒加载:

2、在webpack打包的过程中,将多余文件去掉,如map文件,即在config/index.js中将productionSourceMap的值修改为false,就可以在编译时不生成.map文件了

3、第三方库使用CDN引入

在项目开发中,我们会用到很多第三方库,如果可以按需引入,我们可以只引入自己需要的组件,来减少所占空间,但也会有一些不能按需引入,我们可以采用CDN外部加载,在index.html中从CDN引入组件,去掉其他页面的组件import,修改webpack.base.config.js,在externals中加入该组件,这是为了避免编译时找不到组件报错。

注意:删掉项目中import的这几个相关的,以及Vue.use()。eslint插件报错not defined的话,前面加个window,如window.VueRouter。

推荐外部的库文件使用CDN资源:

bootstrap CDN:https://www.bootcdn.cn

Staticfile CDN:https://www.staticfile.org

jsDelivr CDN:https://www.jsdelivr.com

75 CDN:https://cdn.baomitu.com

UNPKG:https://unpkg.com

cdnjs:https://cdnjs.com

4、vue-cli开启打包压缩和后台配置gzip访问

首先安装插件:compression-webpack-plugin

在 config/index.js中将productionGzip 改为 true

此时重新打包 npm run build ,此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢,之后项目访问的文件就是这个.gz文件

后台nginx开启gzip模式访问,浏览器访问项目,自动会找到 .gz 的文件。加载速度明显提高:

在 nginx.conf 配置文件中 配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556079.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

事件处理 v-on

<!--事件的基本使用&#xff1a;1. 使用 v-on:xxx 或 xxx 绑定事件&#xff0c;其中 xxx 是事件名2. 事件的回调需要配置在 methods 对象中&#xff0c;最终会在 vm 上3. methods 中配置的函数&#xff0c;不要用箭头函数&#xff01;否则 this 就不是 vm 了4. methods 中配…

java restful文件传输_java中使用restful web service来传输文件

【1】上传大文件&#xff1a;前端页面&#xff1a;1)同步上传&#xff1a;2)异步上传&#xff1a;异步上传文件上传文件&#xff1a;function doUpload() {// var formData new FormData($("#uploadForm")[0]);var formData new FormData()formData.append("t…

enum与int、String之间的转换

enum与int、String之间的转换 enum<->int enum -> int: int i enumType.value.ordinal(); int -> enum: enumType b enumType.values()[i]; enum<->String enum -> String: enumType.name() String -> enum: enumType.valueOf(name); 下面是Enum和字…

ios 简书 获取通讯录信息_iOS-授权获取通讯录

- (void)getContact{CNAuthorizationStatus authorizationStatus [CNContactStore authorizationStatusForEntityType:CNEntityTypeContacts];if(authorizationStatus CNAuthorizationStatusAuthorized) {// 获取指定的字段,并不是要获取所有字段&#xff0c;需要指定具体的字…

枚举ENUM的tostring() valueof()name()和values()用法

从jdk5出现了枚举类后,定义一些字典值可以使用枚举类型; 枚举常用的方法是values():对枚举中的常量值进行遍历; valueof(String name) :根据名称获取枚举类中定义的常量值;要求字符串跟枚举的常量名必须一致; 获取枚举类中的常量的名称使用枚举对象.name() 枚举类中重写了t…

Vue键盘事件

<!--1. Vue 中常用的按键别名&#xff1a;回车 > enter删除 > delete (捕获"删除"和"退格"键&#xff09;退出 > esc空格 > space换行 > tab &#xff08;特殊&#xff0c;必须配合 keydown 去使用&#xff09;上 > up下 > down左…

win10引导安卓x86_生命不息折腾不止 Win10竟与安卓有一腿

有些公司、有些产品、有些人总是生命不息折腾不止&#xff0c;不断地更新补丁、不断地出现新的漏洞。近日&#xff0c;微软又搞了几个大新闻。微软Azure营收翻倍&#xff1a;月初&#xff0c;微软重组其销售团队&#xff0c;更专注于云服务的提供&#xff0c;而其销售工作将会转…

Vue 计算属性 computed

<!--计算属性&#xff1a;1. 定义&#xff1a;要用的属性不存在&#xff0c;要通过已有的属性计算得来2. 原理&#xff1a;底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get 函数什么时候执行&#xff1f;(1). 初次读取时会执行一次(2). 当依赖的数据发…

Mysql 数据库默认值选 ‘‘“ 、Null和Empty String的区别

Mysql 数据库默认值选 ‘’" 、Null和Empty String的区别 1&#xff1a;空值(’’)是不占用空间的 2: MySQL中的NULL其实是占用空间的。官方文档说明: “NULL columns require additional space in the row to record whether their values are NULL. For MyISAM tables,…

Vue 监视属性 watch

<!--监视属性 watch:1. 当被监视的属性变化时&#xff0c;回调函数自动调用&#xff0c;进行相关操作2. 监视的属性必须存在&#xff0c;才能进行监视3. 监视的两种写法&#xff1a;(1). new Vue 时传入 watch 配置(2). 通过 vm.$watch 监视深度监视&#xff1a;(1). Vue 中…

NAVICAT MYSQL 建表字段 默认值、EMPTY STRING、空白、NULL 的区别

Navicat mysql 建表字段 默认值、empty string、空白、NULL 的区别 总结在最后&#xff0c;没啥干货 简单测试了4种类型 bigint tinyint varchar char 单引号 ‘’ 双引号 “” 自定义的默认值 如&#xff1a; 未知的姓名 新建一张用户表 CREATE TABLE user (id bigint(20…

ddr2的上电顺序_关于内存的插入顺序的问题

展开全部#ifndef FUNS_H#define FUNS_Hvoid error( char *, ... ); /* 输出错误信32313133353236313431303231363533e59b9ee7ad9431333234323734息&#xff0c;退出程序 */void flush_stdin( void ); /* 清空“输入缓冲区” */#endif#ifndef SQLIST_H#define SQLIST_H#define I…

如何将vue项目打包为.apk文件

说明&#xff1a;使用Vue.js开发完毕的app一般不作处理的话&#xff0c;就只能在浏览器上做为Webapp使用。如果需要将它安装到安卓手机上就需要打包为.apk文件了。 前提&#xff1a;安装HBuilderX 具体步骤&#xff1a; 1.在vue项目中找到config/build.js 2.找到build下的a…

vue 样式绑定 class

<!--绑定样式&#xff1a;1. class 样式写法&#xff1a;:class"xxx" xxx 可以是字符串、对象、数组字符串写法适用于&#xff1a;类名不确定&#xff0c;要动态获取对象写法适用于&#xff1a;要绑定多个样式&#xff0c;个数不确定&#xff0c;名字也不确定数组…

python web后端和vue哪个难_全栈开发用纯后端模板与Vue+后端框架组合哪个好?

全栈开发没有明确的定义&#xff0c;但应该指的就是前端后端数据库。所以只用纯后端框架&#xff0c;不算全站开发。至少在Angularjs出现以前&#xff0c;我没听说过全站开发这个词。你问题描述中的感觉是对的&#xff0c;这就是前后端分离的好处。前后端分离就是&#xff1a;两…

MySQL 字段默认值该如何设置

MySQL 字段默认值该如何设置 前言&#xff1a; 在 MySQL 中&#xff0c;我们可以为表字段设置默认值&#xff0c;在表中插入一条新记录时&#xff0c;如果没有为某个字段赋值&#xff0c;系统就会自动为这个字段插入默认值。关于默认值&#xff0c;有些知识还是需要了解的&am…

vue 条件渲染 v-if | v-show

<!--条件渲染&#xff1a;1. v-if写法&#xff1a;(1). v-if"表达式"(2). v-else-if"表达式"(3). v-else"表达式"适用于&#xff1a;切换评率较低的场景特点&#xff1a;不展示的DOM元素直接被移除注意&#xff1a;v-if 可以和 v-else-if、v-…

unity摄影机depth模式_Unity3D Camera 摄像机属性详解

unity3d摄像机参数1.ClearFlags:清除标记。决定屏幕的哪部分将被清除。一般用户使用对台摄像机来描绘不同游戏对象的情况&#xff0c;有3中模式选择&#xff1a;Skybox&#xff1a;天空盒。默认模式。在屏幕中的空白部分将显示当前摄像机的天空盒。如果当前摄像机没有设置天空盒…

mysql,in中重复的记录也查出的方法

mysql&#xff0c;in中重复的记录也查出的方法 如题&#xff0c;举例说明下&#xff0c;假如where in (1,2,3,2,5,3);其中2&#xff0c;3都有重复的&#xff0c;想要让查出的记录数量和in中的相同&#xff0c;重复的也会显示重复的记录&#xff0c;就是得出的记录是6条。 in有…

vue 列表渲染 v-for

一、v-for 基本使用 <!--v-for 指令1. 用于展示列表数据2. 语法&#xff1a;v-for"(item, index) in xxx" :key"yyy"3. 可遍历&#xff1a;数组、对象、字符串&#xff08;用得少&#xff09;、指定次数&#xff08;用得少&#xff09; --> <div…