前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue加载优化(全)

vue加载优化(全)

作者头像
程序员不务正业
发布2019-10-24 14:34:56
5610
发布2019-10-24 14:34:56
举报
1、路由懒加载
代码语言:javascript
复制
const loginFail = resolve => require(["@/views/loginFail"], resolve);
2、压缩包方式

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

代码语言:javascript
复制
  //productionGzip: false,// 默认值为false
  productionGzip: true,

执行

代码语言:javascript
复制
npm install --save-dev compression-webpack-plugn

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

代码语言:javascript
复制
npm run build

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

代码语言:javascript
复制
npm install --save-dev compression-webpack-plugin@1.1.11

其他异常自行解决

完成后

代码语言:javascript
复制
npm run build

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

本地打包结束,修改nginx.conf服务器配置 添加如下配置

代码语言:javascript
复制
#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

代码语言:javascript
复制
config文件夹中修改index.js文件 
 productionSourceMap: false,

4、图片压缩

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.10.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、路由懒加载
  • 2、压缩包方式
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档