美文网首页
vue项目优化一

vue项目优化一

作者: 白小纯Zzz | 来源:发表于2019-05-16 16:26 被阅读0次

vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能

  • 第一步,在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin


    Snipaste_2019-05-16_16-18-50.png
  • 第二步,运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression Plugin Invalid Options。根据官网提示,需要将CompressionWebpackPlugin的设置由asset改为filename。

Snipaste_2019-05-16_16-19-51.png Snipaste_2019-05-16_16-20-05.png
  • 第三步,再次运行 npm run build打包项目,这时可能会继续报错,提示TypeError: Cannot read property 'emit' of undefined。据我查证,是安装的compression-webpack-plugin依赖有问题,需要卸载compression-webpack-plugin更改安装低版本 v1.12。
Snipaste_2019-05-16_16-21-14.png
  • 第四步,卸载当前安装的compression-webpack-plugin:npm uninstall --save-dev compression-webpack-plugin
Snipaste_2019-05-16_16-22-22.png
  • 第五步,安装低版本compression-webpack-plugin:npm install --save-dev compression-webpack-plugin@1.1.2
Snipaste_2019-05-16_16-23-04.png
  • 第六步,再次运行 npm run build打包项目,这时将正常包vue项目,愉(ku)快(bi)的j将vue开发上线了。
  • 第七步,开启 nginx 服务端 gzip性能优化。找到nginx配置文件在 http 配置里面添加如下代码,然后重启nginx服务即可。

    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;
    
    }
    
    Snipaste_2019-05-16_16-25-04.png

相关文章

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • Nginx开启Gzip优化网页访问速度

    前言 开启Nginx Gzip 优化网页加载速度不限于Vue项目,所有前端皆可开启gzip优化如果是Vue项目可以...

  • vue.config.js配置

    vue cli3.x创建的项目vue本身已经做了些优化,如果想在这个优化之上在进行优化的话我们需要在项目的根目录新...

  • vue项目优化一

    vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步,在vue项目中安装依赖并将pro...

  • vue 性能优化点

    vue项目中,经常会遇到一些性能优化点,以下就是我在工作中,总结的优化点 vue 性能优化点 1,路由懒加载 2,...

  • 项目优化

    一,本文分为两部分1.普通项目优化2.vue项目优化防止XSS与XSRF(安全性)二,普通项目优化:1.页面加载阶...

  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 博客网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 基于vue-cli@3.0搭建管理系统项目并进行配置优化

    项目说明 本示例根据vue-cli@2.0项目进一步优化,使用vue-cli@3.0搭建; 主要针对项目结构和权限...

  • vue 项目优化

    首屏优化 开启gzip压缩功能引入CDN路由懒加载某些第三方组件按需加载而不是全部加载较小的图片资源用base64...

网友评论

      本文标题:vue项目优化一

      本文链接:https://www.haomeiwen.com/subject/lswiaqtx.html