首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue加载优化(全)

vue加载优化(全)

作者头像
程序员不务正业
发布2019-10-24 14:34:56
发布2019-10-24 14:34:56
7250
举报
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、压缩包方式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档