Vue app.js文件过大，带宽占用过大，优化方案

前言

最近我的网站在使用的过程中发现加载缓慢问题，在没有缓存的情况下页面打开速度需要五秒，这对于用户体验来说是不友好的。通过查找网上的方案
我实验之后确实有效，特分享给大家

方案一 Nginx 启用gzip

找到nginx.conf文件
修改#gzip on 启用
并添加下列信息

gzip  on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

添加完毕后使用 ./nginx -s reload刷新一下nginx
如图：

下面截图给大家解惑：
优化之前app.js耗时

优化之后app.js的耗时

从图中我们可以看出文件的大小缩小为原来的五分之一，时间也由5秒降低到了600ms

PS打个广告：扫码买茶有优惠！！！加班必备！！！

Vue app.js文件过大，带宽占用过大，优化方案（持续优化）相关推荐

vue app.js ＜!doctype html＞报错 Unexpected token ‘＜‘ 作者:哇塞大嘴好帅
vue app.js <!doctype html>报错 Unexpected token '<' 作者:哇塞大嘴好帅作者:哇塞大嘴好帥(哇塞大嘴好帅) 首先我们看下错误确保我们 ...
问题：微信小程序开发之 --- app.js文件介绍
App() App() 函数用来注册一个小程序.接受一个 object 参数(本质就是function 和 data),其指定小程序的生命周期函数等. object参数说明: 属性类型描述触发时 ...
vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
微信小程序中app.js文件、组件、api
app.js文件: 每个小程序都需要在app.js中调用 App 方法注册小程序实例. App({//App实例化,整个小程序只有一个App实例,全部页面共享onLaunch: function () ...
vue引用js文件的多种方式(推荐)
vue引用js文件的多种方式(推荐) Day_by_day93 这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli ...
vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...
对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
多大的带宽才叫大带宽服务器，大带宽服务器有什么优势。
香港大带宽服务器近年来凭借着访问速度快.硬件性能配置好等优势备受广大站长的喜爱.可如今随着直播.游戏等网站规模的壮大,对带宽流量的要求也就随之变高,大带宽服务器逐渐映入眼帘.那么什么是大带宽服务器?租 ...

Vue app.js文件过大，带宽占用过大，优化方案（持续优化）

前言

方案一 Nginx 启用gzip

PS打个广告：扫码买茶有优惠！！！加班必备！！！

Vue app.js文件过大，带宽占用过大，优化方案（持续优化）相关推荐

最新文章

热门文章