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

最新推荐文章于 2024-09-07 15:54:22 发布

楠木青城`

最新推荐文章于 2024-09-07 15:54:22 发布

阅读量402

点赞数 1

分类专栏： vue

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
}