36. 其他优化

ESLint

ESLint 是一个很对JS检查工具,当不满足其要求风格的时候,会给予警告或者错误

官网: https://eslint.org/
民间中文网:https://eslint.bootcss.org.com

使用

ESLint通常配合编辑器使用

1. 在vscode中安装ESLint

该工具会自动检查工程中的JS文件

检查的工作交给eslint库,如果当前工程没有,则会去全局库中查找,如果都没有则无法完成检查

另外,检查的依据是eslint根据配置文件.eslintrc,如果找不到工程中的配置文件,则无法完成检查

1. 安装eslint

npm i [-g] eslint

1. 创建配置文件

可以通过eslint交互式命令创建配置文件

由于windows环境中git窗口对交互式命名支持不是很友好,建议使用powershell

npx eslint --init

eslint 识别工程中的.eslintrc.*文件,也能够是别package.json中的eslintConfig字段

配置

env

配置代码运行环境

• browser : 代码在浏览器中运行
• es6: 是否启用ES6的全局API,例如Promise

parserOptions

该配置指定eslint对哪些语法支持

• ecmaVersion: 支持ES语法版本
• sourceType

1. script: 传统脚本
2. module: 模块化脚本

parser

eslint 的工作原理是先将代码进行解析,然后按照规则进行分析

eslint 默认使用Espree 作为其解析器,你可以在配置文件中指定一个不同的解析器

globals

设置全局变量

{
  "globals":{
      "var1":"readonly",
    "var2":"writable"
  }
}

eslint 支持注释形式的配置,在代码中使用下面的注释也可以完成配置

/* global var1,var2 */
/* global var:writable,var4:writable */

extends

该配置继承自哪里

它的配置可以是字符串或者数组

比如:

{
  "extends":"eslint:recommended" //默认推荐的规则
}

表示,该配置缺失的位置,使用eslint 推荐的规则

ignoreFiles

排除掉某些需要验证的文件

.enlintignore

dist /**/*.js
node_modules

rules

eslint规则集

每条规则影响某个方面的代码风格

每条规则都有下面几个取值:

• off 或 0 或 false: 关闭该规则检查
• warn 或 1 或 true : 警告,不会导致程度退出
• error 或 2 错误,当被触发的时候,程序会退出

除了在配置文件中使用规则外,还可以在注释中使用:

/* eslint eqeqeq: "off",curly:"error" */ //三个等号,严格判断检测

规则集看官方文档

https://eslint.bootcss.com/docs/rules

bundle analyzer

对打包的结果进行分析

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const WebpackBundleAnalyzer = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
module.exports = {
  mode: "production",
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [new CleanWebpackPlugin(), new WebpackBundleAnalyzer()]
};

gzip

gzip是一种压缩文件的算法

B/S结构中的压缩传输

优点:传输效率可以大幅度提升

缺点:服务器的压缩需要时间,客户端的解压需要时间

使用webpack进行压缩

使用compression-webpack-pugin插件对打包的结果进行压缩,可以移除服务器的压缩时间

优点: