vue加载优化(全)

1、路由懒加载

const loginFail = resolve => require(["@/views/loginFail"], resolve);

2、压缩包方式

config文件夹中修改index.js文件

  //productionGzip: false,// 默认值为false
  productionGzip: true,

执行

npm install --save-dev compression-webpack-plugn

执行,一切正常则万事大吉

npm run build

出现版本不匹配等问题,降级webpack

npm install --save-dev compression-webpack-plugin@1.1.11

其他异常自行解决

完成后

npm run build

正常打包结束后 dist/static文件中的css和js应该都会有压缩

本地打包结束,修改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 压缩包方式方式优化完成

3、去除productionSourceMap

config文件夹中修改index.js文件 
 productionSourceMap: false,

4、图片压缩

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue性能优化

    程序员不务正业
  • python3.5 import matplotlib.pyplot错误问题

    程序员不务正业
  • Promise与Callback函数

    1,callback函数处理异步:代码逻辑复杂,可读性差----回调地狱;不可return; 2,promise处理异步: 对比callback,易读,可以...

    程序员不务正业
  • 「简明性能优化」双端开启Gzip指南

    在 http/1.0 协议中关于服务端发送的数据可以配置一个 Content-Encoding 字段,这个字段用于说明数据的压缩方法

    前端劝退师
  • Vue Cli3 开启gzip打包及后台nginx配置

    增加了以上选项是为了让vue build 输出gzip文件,如果要站点生效,还需要配置nginx增加以下配置:

    飞奔去旅行
  • python 解析网络数据包

    网络数据包,我已经使用mitmproxy代理抓取了,但是,数据包有些数据是gzip进行编码的,那么怎么还原成原始报文呢?使用的语言是python。

    py3study
  • python3使用gzip压缩与解压缩

    本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/python-gzip/

    羽翰尘
  • Nginx gzip参数详解及常见问题

    Nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求,并对需要做gzip的类型做gzip,ngx_http_gzip_modu...

    lollipop72
  • 008.Nginx静态资源

    Nginx作为静态资源Web服务器部署配置, 传输非常高效, 常常用于静态资源处理,请求以及动静分离。通常非服务器动态运行生成的文件属于静态资源。

    木二
  • SPA应用部署时首屏启动慢问题解决方案

    使用vuejs开发的单页应用,打包部署上线后,发现首屏启动时间达到了惊人的10s左右,于是开始优化,目前使用到的总结如下:

    用户1141560

扫码关注云+社区

领取腾讯云代金券