vue 项目部署 nginx 开启gzip优化性能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012392251/article/details/80696741

vue-cli项目打包部署nginx,访问项目的时候,发现资源请求很慢,等了一段小白才开始渲染页面,果断F12 Network查看之~

便有了下文作为记录

结果如下:



没错!!凶手就是那条黄色的东东(vendor.js)

我部署的只是一个小项目,vendor.js 就760KB,如果再大一点,结果可想而知。

就去测了一下网站性能 - Google PageSpeed Tool 「自备梯子」

结果优化建议:


所以便研究怎么压缩这个玩意儿的体积;


1、vue - config 构建配置启动gzip

文件路径:config -> index.js -> build:{ }

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

先安装依赖,再 productionGzip 选项设置为 true


2、Nginx 开启 gzip 

文件路径:nginx-1.11.13 -> conf -> nginx.conf

添加如下gzip配置,具体配置描述及更多配置可查看 -> ngx_http_gzip_module

http:{ 
      gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
                 image/gif image/png;
}

修改完成nginx配置,记得reload一下,重启一下服务。

至此gzip配置已完成,下面查看一下开启gzip压缩后的具体效果~




(压缩前后效果渲染对比往上滚动一下!)

当然,还有其他可以优化的地方,例如

  • 路由懒加载;
  • 图片懒加载;
  • 静态资源CDN;
  • 首屏加个loading小菊花动画;

这里就不多赘述了~

第一篇blog,还望各位多多指教。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页