webpack性能优化（四）

webpack性能优化（一）.

一、懒加载

在一些页面中某些js只是需要事件或者某些条件才会触发，这种情况下可以使用懒加载，减少页面加载渲染的时间。

//index.js
const btn = document.querySelector("button");
btn.onclick = async function() {
  //动态加载
  //import 是ES6的草案
  //浏览器会使用JSOP的方式远程去读取一个js模块
  //import()会返回一个promise   （* as obj）
  // const { chunk } = await import(/* webpackChunkName:"lodash" */"lodash-es");
  const { chunk } = await import("./util");//点击事件触发后再请求需要的js
  const result = chunk([3, 5, 6, 7, 87], 2);
  console.log(result);
};

//util.js
export { chunk } from "lodash-es";

二、ESLint

ESLint是一个针对JS的代码风格检查工具，当不满足其要求的风格时，会给予警告或错误

官网：https://eslint.org/

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

1.使用

ESLint通常配合编辑器使用

1. 在vscode中安装ESLint

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

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

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

2. 安装eslint

npm i [-g] eslint

3. 创建配置文件

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

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

npx eslint --init

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

2.配置

1.env

配置代码的运行环境

• browser：代码是否在浏览器环境中运行
• es6：是否启用ES6的全局API，例如Promise等

2.parserOptions

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

• ecmaVersion: 支持的ES语法版本
• sourceType
  • script：传统脚本
  • module：模块化脚本

3.parser

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

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

4.globals

配置可以使用的额外的全局变量

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

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

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

5.extends

该配置继承自哪里

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

比如：

{
  "extends": "eslint:recommended"
}

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

6.ignoreFiles

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

.eslintignore需要在根目录下

dist/**/*.js
node_modules

7.rules

eslint规则集

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

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

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

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

/* eslint eqeqeq: "off", curly: "error" */

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

三、BundleAnalyzer

提供一个帮助打包的试图。

//webpack.config.js
const WebpackBundleAnalyzer = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  mode: "production",
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [new WebpackBundleAnalyzer()]
};

四、gzip

gzip是一种压缩文件的算法

1.B/S结构中的压缩传输

优点：传输效率可能得到大幅提升

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

2.使用webpack进行预压缩

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