首页 > 云开发 > Nginx > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

Nginx

npm run build 文件过大
打包生成文件:

浏览器访问效果:

第一步:Nginx开启gzip (配置完切记重启nginx)

后台配置nginx.config。关于gzip压缩代码:

http {
  gzip on; #开启或关闭gzip on off
  gzip_disable "msie6"; #不使用gzip IE6
  gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
  gzip_buffers 4 16k; #buffer 不用修改
  gzip_comp_level 3; #压缩级别:1-10,数字越大压缩的越好,时间也越长
  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
  gzip_vary off; #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"
}

第二部:vue项目中config/index.js

productionGzip: true, //是否开启gizp压缩
productionGzipExtensions: ['js', 'css'],

开启后cnpm run build 会生成*.gz文件。
像这样:

如何识别gzip与非gzip请求

gzip请求:

非gzip请求:

gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。

 1、在项目 根目录config/index.js 中 build 内找到 productionGzip: false, 把 false改为true。与 productionSourceMap 刚好相反。

属性值修改后,这个时候可以执行 npm run build。但是会报错,提示找不到 " Cannot find module 'compression-webpack-plugin'"

解决方法:

npm install --save-dev compression-webpack-plugin@1.1.12    //记得带版本号

文章来源:segmentfault,作者:name。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

加载 打包 页面 Vue Vue.js

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索