vue项目打包开启Gzip压缩

作者:神秘网友 发布时间:2020-10-24 01:43:05

vue项目打包开启Gzip压缩

vue项目打包开启Gzip压缩

vue项目打包开启Gzip压缩

1. vue步骤

  1. 安装npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址
  2. 使用—在vue.config.js文件中
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugin: [
            new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
            })
        ]
    }
}
  1. 运行npm run build即可

2. Nginx步骤

  1. 在nginx的安装目录中找到conf-> nginx.conf文件
  2. 打开 在http中添加如下代码
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;
    
    ...
    server {
        ...
    }
    ...
}

3. 判断是否开启

  1. npm run build之后可以看到打包的代码大小

    vue项目打包开启Gzip压缩

  2. 打开浏览器的 控制台F12，选中network，在标红的地方鼠标右键
    vue项目打包开启Gzip压缩

  3. 选中Response Headers —> Content-Encoding
    vue项目打包开启Gzip压缩

  4. 可以看到gzip说明已经开启
    vue项目打包开启Gzip压缩

  5. 鼠标悬停看这个文件的大小和npm run build之后打包的，显示gzipped是否相近，并且提示XXKB transferred over network,resource size :XXKB
    vue项目打包开启Gzip压缩

vue项目打包开启Gzip压缩相关教程

  1. 【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式

    【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式及表单校验提示信息 1.前言 现在的客户端与以往的有些区别，比如登录页面的输入框，大都废弃了之前的登录框样式，而采用只存在底边的输入框。还有就是输入框的错误信息都会采用浮层的形式提示，

  2. HCIA-RS项目实战案例

    HCIA-RS项目实战案例 文章目录 项目需求 企业拓扑结构 配置步骤 项目路由需求 项目互联网需求 实验拓扑及预配置，如果有需要的可以通过邮箱（ Email ： [emailprotected] ）联系我。 本篇是关于HCIA-RS的综合项目实验整理笔记。实验拓扑及配置步骤参考资料来

  3. vue造轮子之封装选择下拉树

    vue造轮子之封装选择下拉树 最近公司有个新需求,希望能有一个下拉选择树的功能，大概的功能和样式如下所示: 然后我的第一反应就是上elementui上找现成的组件，但是挺遗憾的就是element并没有提供这样的组件，所以只能自己动手造一个了。 1. 组件需求 (1) 支持

  4. Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

    Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色 先在Table 表格 上加 上属性 el-table :data=tableList border :cell-style=columnStyle el-table-column type=index label=第一列 width=50px/el-table-column el-table-column type=index label

  5. 搭建react项目（npm）

    搭建react项目（npm） 文章目录 一、检查环境是否适合安装React项目 二、使用步骤 1.通过npm全局安装create-react-app 2.使用create-react-app命令来创建项目 一、检查环境是否适合安装React项目 首先检查一下是否已经安装webpack？（webpack-v） 安装webpack

  6. Vue通过eventBut实现组件全局通信

    Vue通过eventBut实现组件全局通信 一、组件之间的层级关系如下图： 现要在test_page_1.vue 组件中改变，MyHeader.vue组件中的某个属性值。 二、eventBus简介： EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用

  7. 在springboot项目中集成log4j日志输出

    在springboot项目中集成log4j日志输出 dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-log4j/artifactIdversion1.3.8.RELEASE/version/dependency 此处有个注意点，就是关闭springboot自带的依赖： 将springstarter依赖：

  8. RxJS结合vue-rx， Akita的介绍和使用

    RxJS结合vue-rx， Akita的介绍和使用 介绍 ： 解决异步事件。它将一切数据包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后利用强大丰富的操作符（Operators ）对流进行处理，使得用户可以用同步编程的方式处理异步数据。 基本概念 ：Observable 类