## 批量上传静态资源至七牛云

```js
let qiniu = require('qiniu');
let fs = require('fs');
let path = require('path');

let accessKey = 'xxxx';
let secretKey = 'xxx';
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
  scope: 'aaaa', //存储空间列表名字
  // detectMime:1  //文件类型格式选择
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken=putPolicy.uploadToken(mac);   // 1.生成uploadToken参数

let config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z0; // 对应的机房编号，华东为z0

function dpUpload (localFile,key){

  let formUploader = new qiniu.form_up.FormUploader(config);
  let putExtra = new qiniu.form_up.PutExtra();   // 2.生成putExtra参数，必须放此位置，否则生成的文件类型都是text/html

  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) {
      throw respErr;
    }
    if (respInfo.statusCode == 200) {
      console.log(respBody);
    } else {
      console.log(respInfo.statusCode);
      console.log(respBody);
    }
  });
}


let publicPath=path.join(__dirname,'/dist'); // 上传目录

const uploadAll=(dir,prefix)=>{
  const files=fs.readdirSync(dir);
  files.forEach((file)=>{
    let filePath=path.join(dir,file);
    const key=prefix?`${prefix}/${file}`:file;
    if(fs.lstatSync(filePath).isDirectory()){
      return uploadAll(filePath,key)
    }
    dpUpload(filePath,key)
  });

};


uploadAll(publicPath);

let qiniu=require('qiniu');
fs=require('fs');
path=require('path');

let accessKey = 'xxxx';
let secretKey = 'xxx';
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
  scope: 'aaaa', //存储空间列表名字
  // detectMime:1  //文件类型格式选择
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken=putPolicy.uploadToken(mac);   // 1.生成uploadToken参数

let config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z0; // 对应的机房编号，华东为z0

function dpUpload (localFile,key){

  let formUploader = new qiniu.form_up.FormUploader(config);
  let putExtra = new qiniu.form_up.PutExtra();   // 2.生成putExtra参数，必须放此位置，否则生成的文件类型都是text/html

  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) {
      throw respErr;
    }
    if (respInfo.statusCode == 200) {
      console.log(respBody);
    } else {
      console.log(respInfo.statusCode);
      console.log(respBody);
    }
  });
}


let publicPath=path.join(__dirname,'/dist'); // 上传目录

const uploadAll=(dir,prefix)=>{
  const files=fs.readdirSync(dir);
  files.forEach((file)=>{
    let filePath=path.join(dir,file);
    const key=prefix?`${prefix}/${file}`:file;
    if(fs.lstatSync(filePath).isDirectory()){
      return uploadAll(filePath,key)
    }
    dpUpload(filePath,key)
  });

};


uploadAll(publicPath);


```

利用 Node 批量上传静态资源至七牛云

**Git是一款强大的版本控制工具，它可以让团队更好地协作、追踪代码变化和管理代码版本。在Git中，Commit是提交代码变更的操作，每个Commit都应该包含一些描述性的信息，以便其他开发人员了解这个Commit的目的和意义。为了让Commit信息更加规范和易于理解，许多团队都采用了特定的Commit提交规范。在本文中，我们将介绍一些常用的Git Commit提交规范，包括它们的定义、如何使用它们以及为什么采用这些规范可以帮助我们更好地管理代码。**



# Commit 内容规范

```
<type>(<scope>): <subject>

<body>

<footer>
```
### 大致分为三个部分(使用空行分割):

标题行: 必填, 描述主要修改类型和内容
    
主题内容: 描述为什么修改, 做了什么样的修改, 以及开发的思路等等
    
页脚注释: 放 Breaking Changes 或 Closed Issues 

### type commit 的类型：

- feat: 新功能、新特性
- fix: 修改 bug
- perf: 更改代码，以提高性能（在不影响代码内部行为的前提下，对程序性能进行优化）
- refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
- docs: 文档修改
- style: 代码格式修改, 注意不是 css 修改（例如分号修改）
- test: 测试用例新增、修改
- build: 影响项目构建或依赖项修改
- revert: 恢复上一次提交
- ci: 持续集成相关文件修改
- chore: 其他修改（不在上述类型中的修改）
- release: 发布新版本
- workflow: 工作流相关文件修改

### 示例：
```bash 
feat: 添加网站深色模式功能
fix: 修复文章标题错误的问题
fix(global): 修复弹层层级展示问题
```

# 常见缩写及其含义
- LGTM：Looks Good To Me，表示代码经过评审后已经被确认通过；
- SGTM  Sounds Good To Me ，同上
- PR：Pull Request，表示代码请求合并；
- CI：Continuous Integration，表示持续集成；
- CD：Continuous Delivery，表示持续交付；
- README：项目说明文档；
- FAQ：Frequently Asked Questions，表示常见问题解答；
- WIP：Work In Progress，表示正在进行中的工作；
- TBD：To Be Determined，表示待定的内容。
- TL;DR Too Long; Didn't Read. 太长懒得看，也有很多文档在做简略描述之前会写这么一句

# 有趣的GitMoji
[moji](https://gitmoji.dev)
### 示例：
```bash
:bug: fix: 里程碑编辑权限控制修改
```

Git Commit 提交规范

当今软件开发行业中，持续集成和持续交付已经成为日常工作中不可或缺的一部分。这是因为在一个团队协作的环境中，每个人都需要不断地将他们的代码与整个代码库进行集成和测试。为了简化这一过程，GitLab CI/CD 工具被越来越多的团队所采用，它可以帮助团队自动化构建、测试和交付他们的软件。本文将介绍 GitLab CI/CD 的基本概念，以及如何使用它来提高团队的工作效率和代码质量。



## Job
一个stage可以有若干个 job，各 job 间并行执行，所有 job 成功，整个 stage 才会成功

单个 job 下的 script 执行顺序是串行的。

**问：一个job做完所有事情，还是拆分成多个job？**

**答：如果 script 间没有强逻辑依赖 都可以拆分成多个 job；例代码格式化检查，分别校验 js / md / css 文件，让他们同时进行。
但是如果为简单的script，就没有必要拆分了，因为每个任务的执行都要经过初始化、拉取缓存等步骤，对于 script 比较简单的 job 来说反而拖慢了整个 job 执行时间，反而不如合并 job**

~/.gitlab-runner/config.toml 
```yaml
concurrent = 2 # 单个stage可以同时并行的job任务数量 default：1
```
demo
```yaml
lint:
  stage: test
  script:
    - npm run lint

# unit test
test:
  stage: test
  script:
    - npm run test

# coverage check
cov:
  stage: test
  script:
    npm run cov
```

## Pipleline
一个Pipleline有若干个stage，每个stage上有至少一个Job，如下图所示

![image.png](https://blog.ccz.life/static/img/e304c32e6332900a4f1ad971422416c0.image.png)

各 stage 间串行执行，即前一个 stage 执行成功后才会执行下一个，所有 stage 成功后，整个任务才会成功

每个阶段执行都会初始化代码，即不保留中间过程产物，如：node_modules，build 等目录

定义stages
```
stages:
    - install
    - build
    - test

```

## cache、artifacts
### cache 
设计用于项目依赖，典型的像 `node_modules`

install 如果有缓存，可以加快执行速度，如果没有则会完整执行命令，增加耗时，但不会执行失败。缓存只是尽力而为之，所以别期望缓存会一直存在

缓存文件存放在Runner机器上，MacOs下：`/Users/ccz/cache/chenglin/gitlab-ci-test`(用户home目录下>gitlab昵称>绑定的gitlab项目名称)

每个job，都是独立的，会默认把前一个job新增的资源删除得干干静静，也就是说我们前一步 npm install 安装的`node_modules`资源无法用于下一个job，所以我们需要利用cache去缓存文件


在默认情况下，如果有 cache 的配置，那么每个 job 会在开始执行前将对应路径的文件下载下来，并在任务结束前重新上传，不管文件是否有变化都会如此操作。这个默认的配置是 `cache:policy` 中的`pull-push` 策略
```yaml
cache: # 缓存
  key: nodeModule  # 缓存默认名称为default。当有新缓存时，新的会覆盖老的。所以当有多份缓存时，需要使用key进行区分
  untracked: true # 缓存所有未被git跟踪的文件
  policy: pull-push # 默认值：pull-push，也可以使用pull or push
  paths:  # 缓存指定文件目录
    - node_modules
```

### artifacts 
设计用来跨 stage 共享中间产物，例如 `build/` `dist/` 等目录

中间产物可以在所有stage中进行使用，使用时，需要定义`dependencies`属性

中间产物最终可以在GitLab上进行下载

```yaml
artifacts:
  name: "$CI_COMMIT_REF_NAME" # 文件名称
  expire_in: 40 sec # 指定过期时间，默认以秒为单位，默认值为30 天
  untracked: true # 保存所有未被git跟踪的文件为中间产物
  paths: # 保存指定文件目录为中间产物
     - build/
```

## Runner
GitLab CI/CD 提供了运行平台的机制，它提供了一个叫`gitlab-runner`的软件

只要在对应的平台(机器或docker)上下载并运行这个命令行软件，并输入从GitLab交互界面获取的toke，就可以把当前机器和对应的GitLab CI/CD 流程绑定，也即：每次跑 CI/CD 都在这个平台上进行

`Shared Runner` 是Gitlab平台提供的免费使用的runner程序，它由Google云平台提供支持，每个开发团队有十几个。对于公共开源项目是免费使用的，如果是私人项目则有每月2000分钟的CI时间上限。

`Specific Runner`是我们自定义的，在自己选择的机器上运行的runner程序，GitLab给我们提供了一个叫`gitlab-runner`的命令行软件，只要在对应机器上下载安装这个软件，并且运行`gitlab-runner register`命令，然后输入从 GitLab CI/CD 交互界面获取的token进行注册, 就可以在自己的机器上远程运行pipeline程序了

- 当我们不填写 tags，会默认跑`Shared Runner`
- `Shared Runner` 当然也可以不用官方提供的runner程序，可以使用自己的runner程序，这样就没有2000分钟的使用限制了
- 可以使用`Specific Runner` tags，这样就会在对应机器上运行对应脚本

GitLab CI/CD

**当今最流行的JavaScript库之一React，因其强大的组件化开发能力而备受欢迎。React官方文档是学习和掌握React的重要资源之一，它提供了全面的指南、API文档和示例代码。因为现在的公司使用React进行开发项目，遂打算重新跟着文档学一遍React。**



## ReactDOM.render
```jsx
ReactDOM.render(
  <Game />, // 提供html标签或者React组件标签，都可以被解析
  document.getElementById('root') // 插入到的节点
 );
```
返回的是一个对象，无标记值，但是提供了updater和isMounted

## React.createElement
JSX语法会自动将html标签转换成React.createElement 

JSX文件，每次需引入React插件，因为转换时，会用到React.createElement

```jsx
// 转换前
const elObj=<div>result</div>
// 转换后
const elObj = /*#__PURE__*/React.createElement("div", null, "result");
```

返回的是一个对象，介绍几个常用值：
- key：唯一索引
- props：当前组件props值
- ref：当前组件ref值
- type：当前 class 实例
- _owner：虚拟节点值
```js
$$typeof: Symbol(react.element)
key: null
props: {a1: "a1", a2: "a2", a3: ƒ}
ref: "t1"
type: class Board
_owner: FiberNode {tag: 1, key: null, stateNode: Game, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: Game {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
_source: {fileName: "/Users/ccz/Public/student-project/cs/react-website-student/src/index.js", lineNumber: 50, columnNumber: 23}
__proto__: Object
```

## class 组件 constructor
- 调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this
- super(props)的目的：在constructor中可以使用this.props

最后，可以看下[React文档](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class)，里面有一段
Class components should always call the base constructor with props.

另外附上一个高分回答

![image.png](https://blog.ccz.life/static/img/cb26e861635a25f8a03c435e76bd05b6.image.png)

## props命名规则
通常会将代表事件的监听 prop 命名为on[Event]，将处理事件的监听方法命名为 handle[Event]这样的格式

## 组件命名规范
组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML的 div 标签，而 <WeLcome /＞则代表一个组件，并且需在作用域内使用 WeLcome。

## key
- 组件无法访问props key
- 默认将数组的索引当做index值
- 仅当数组循环生成React元素时，会提示指定key值
- 数组的key值并不需要全局唯一，保证同一级元素唯一即

![image.png](https://blog.ccz.life/static/img/0561aacbdaa769a8a2e4a252fb51ed49.image.png)

## React.lazy
1. React.lazy 必须和 React.Suspense组件配合使用
```jsx
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
```
2. React.lazy 目前只支持默认导出（default exports）

## Context

### class组件使用方式
1. 使用React.createContext定义context
2. 父组件使用Context.Provider包住
3. 子组件Class 定义 contextType属性

**context.js**
```js
// 建议使用单独js，否则容易出现ESM循环引用问题
import React from 'react'
export const ThemeContext = React.createContext('light')
```
**app.jsx**
```jsx
import { ThemeContext } from './context'
import Child from './child'
class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value="dark">
        <Child/>
      </ThemeContext.Provider>
    )
  }
}
```
**child.jsx**
```jsx
import React from 'react'
import { ThemeContext } from './context'

class Child extends React.Component {
  static contextType = ThemeContext;
  render () {
    console.log('context',this.context)
    return (
      <div> </div>
    )
  }
}
export default Board
```

### 函数式组件使用方式
1. 使用React.createContext定义context（同上）
2. 父组件使用Context.Provider包住（同上）
3. 子组件使用Context.Consumer包住

child.jsx
```jsx
import { ThemeContext } from './context'
const Child = (props) => {
  return (
  <ThemeContext.Consumer>
    { value =>{
      console.log('value',value)
      return (
        <div> </div>
      )
    }}
  </ThemeContext.Consumer>
  )
}
```

### displayName
React DevTools 使用该字符串来确定 context 要显示的内容。
示例，下述组件在 DevTools 中将显示为 MyDisplayName：
```jsx
const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';
<MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中
```

### Consumer
多个Provider的情况下,可以创建多个对应的Consumer接收内容

### 注意事项
当value更新时，Provider包裹下的所有子组件都将被更新。
Provider value 直接赋值为对象时，建议抽离为state，直接使用对象赋值，会造成无用的元素更新，造成性能消耗。

## ErrorBoundary
自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载
![image.png](https://blog.ccz.life/static/img/5a78cda6d960676f44a16ddf9f27ff8e.image.png)

通过最外层组件的 componentDidCatch生命周期进行捕获错误
```jsx
import React from 'react'

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.log(error, errorInfo);
  }
  render() {
    return this.props.children;
  }
}

export default ErrorBoundary
```
```jsx
import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);
```

## ref

- 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性
- 当 ref 属性用于自定义的 class 组件时， ref 对象接收组件的挂载实例作为其 current 属性，可以通过findDomNode获取dom
- ref和key一样，不能当做props向下传递

注意：在React中ref属性仅仅用作获取dom值，在React16.3前，ref仅能拿到当前元素的dom情况。
当然我们可以通过定义其他function props去获取对应的dom

### React.forwardRef
react内置高阶组件，可以透传ref，ref的值可以直接指定dom，也可以传对象
```jsx
const FancyButton = React.forwardRef((props, ref) => (  
   <button ref={ref} className="FancyButton"> 
      {props.children}
   </button>
));

// 你可以直接获取 DOM button 的 ref
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
```

注意：在使用forwardRef时，应当将其视为一个破坏性更改，因为该组件会有明显不同的行为。
当我们使用高阶组件(HOC)，我们在高阶组件使用ref，拿到的是高阶组件ref的实例，若我们想拿取Component的实例，需要定义额外的props字段。使用React.forwardRef可以直接使用ref 当做props进行透传。

### 总结
- 若父组件想要获取子组件的方法，class组件可以在直接在子组件暴露当前实例
- 函数式组件在hooks之前，值都是外层提供的，所以没有该需求，但是在hooks出来之后，函数式组件也可以维护自己的值和方法，可以使用React.forwardRef进行传递

## 高阶组件
1.不要改变原始组件。使用组合
不要试图在 HOC 中修改组件原型（或以其他方式改变它）。
```js
function logProps(InputComponent) {
  InputComponent.prototype.componentDidUpdate = function(prevProps) {
    console.log('Current props: ', this.props);
    console.log('Previous props: ', prevProps);
  };
  // 返回原始的 input 组件，暗示它已经被修改。
  return InputComponent;
}

// 每次调用 logProps 时，增强组件都会有 log 输出。
const EnhancedComponent = logProps(InputComponent);
```

2.将不相关的 props 传递给被包裹的组件

HOC 为组件添加特性。自身不应该大幅改变约定。HOC 返回的组件与原组件应保持类似的接口。
HOC 应该透传与自身无关的 props。大多数 HOC 都应该包含一个类似于下面的 render 方法：
```jsx
render() {
  // 过滤掉非此 HOC 额外的 props，且不要进行透传
  const { extraProp, ...passThroughProps } = this.props;

  // 将 props 注入到被包装的组件中。
  // 通常为 state 的值或者实例方法。
  const injectedProp = someStateOrInstanceMethod;

  // 将 props 传递给被包装组件
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}
```
3.包装显示名称以便轻松调试

最常见的方式是用 HOC 包住被包装组件的显示名称。比如高阶组件名为 withSubscription，并且被包装组件的显示名称为 CommentList，显示名称应该为 
```jsx
WithSubscription(CommentList)

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
```

4.不要在 render 方法中使用 HOC

通常，你不需要考虑这点。但对 HOC 来说这一点很重要，因为这代表着你不应在组件的 render 方法中对一个组件应用 HOC：
```js
render() {
  // 每次调用 render 函数都会创建一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 这将导致子树每次渲染都会进行卸载，和重新挂载的操作！
  return <EnhancedComponent />;
}
```

5.务必复制静态方法

## 深入JSX

### 在 JSX 类型中使用点语法
在 JSX 中，你也可以使用点语法来引用一个 React 组件。当你在一个模块中导出许多 React 组件时，这会非常方便。
```jsx
import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;}
```

### JSX 会移除行首尾的空格以及空行。
与标签相邻的空行均会被删除，文本字符串之间的新行会被压缩为一个空格。因此以下的几种方式都是等价的：
```jsx
<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>
```
### 布尔类型、Null 以及 Undefined 将会忽略
false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同：
```jsx
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
```
反之，如果你想渲染 false、true、null、undefined 等值，你需要先将它们转换为字符串：
```jsx
<div>My JavaScript variable is {String(myVariable)}.</div>
```

## Portal
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案，Portal 组件即使不在父组件的dom节点内，父组件仍然能够捕获其事件
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
const Modal = (props) => {
  return ReactDOM.createPortal(
    <div className="modal-container">{props.children}</div>,
    document.querySelector('body')
  );
}
export default Modal
```

## 生命周期废弃

### componentWillMount废弃原因：
1. fiber架构改动后，render前的生命周期都有可能被执行多次
2. ajax请求放置在componentWillMount的作用意义并不大，事实上在 componentWillMount 执行后，第一次渲染就已经开始了，所以如果在 componentWillMount 执行时还没有获取到异步数据的话，页面首次渲染时也仍然会处于没有异步数据的状态。换句话说，组件在首次渲染时总是会处于没有异步数据的状态，所以不论在哪里发送数据请求，都无法直接解决这一问题
3. 服务端渲染下，服务端和客户端会各执行一次该生命周期
4. 可能会导致内存溢出，componentWillMount注册事件时，可能会导致事件多次被重复注册。

### componentWillUpdate  废弃原因：
1. fiber架构改动后，render前的生命周期都有可能被执行多次
2. fiber架构改动后，生命周期会被打断，获取到的dom状态会不一样，可以使用getSnapshotBeforeUpdate代替

### componentWillReceiveProps 废弃原因：
1. fiber架构改动后，render前的生命周期都有可能被执行多次
2. 没有一个明确的定位，往往用于实现通过 props 更新 state 的功能。但 componentWillReceiveProps 只在 Updating 中 props 更新时被调用，无法覆盖所有场景
3. componentWillReceiveProps是更新阶段唯一一个可以主动setState的生命周期，导致开发者错误地在该函数中引入 side effect（副作用，调用外部函数等），使得组件重复多次执行 Updating。

React 官方文档学习笔记

**当我们在开发网页应用程序时，我们经常需要通过将静态资源（如HTML、CSS、JavaScript文件等）压缩来提高网页的加载速度和性能。其中，GZIP压缩是一种常用的压缩技术，它可以将静态资源压缩为更小的文件大小，从而加快它们的传输速度，并减少网络带宽的占用。而Webpack作为现代JavaScript应用程序的模块打包工具，也提供了一种方便的方式来对静态资源进行GZIP压缩。**



## Webpack4配置
```js
const CompressionPlugin = require('compression-webpack-plugin')
module.exports={
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionPlugin({
          // gzip压缩配置
          test: /\.js$|\.html$|\.css/, // 匹配文件名
          threshold: 10240, // 对超过10kb的数据进行压缩
          deleteOriginalAssets: false, // 是否删除原文件
        })
      )
    }
  }
}
```

## Nginx配置
```nginx
server {
 listen 202;
 server_name default_server;
 root /data/jenkins-demo;
 autoindex on;
 gzip on;
 gzip_static on;
 gzip_http_version 1.1;       #http协议版本
 gzip_min_length 1024;
 gzip_buffers 4 16k;
 gzip_comp_level 2;           #压缩等级，等级越高，压缩比例越高
 gzip_types text/plain application/javascript 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"
 gzip_disable "MSIE [1-6]\."; #IE6对Gzip不怎么友好，不给它Gzip了

location / {
  index index.html;
 }
}
```