webpack进阶用法你都get到了么？

时间:2020-01-21 PC.aaron 人气:1

如何消除无用代码；打包自己的私有js库；实现代码分割和动态import提升初次加载速度；配置eslint规范团队代码规范；打包异常抓捕你都get到了么？

摇树优化：Tree Shaking

webpack借鉴了rollup构建工具，从2.0就实现支持tree shaking，其中，到webpack4.0后通过开启mode:'production'即默认开启。

tree shaking原理

DCE(Dead code elimination)，即死码消除，编译器原理中，死码消除（Dead code elimination）是一种编译最优化技术，它的用途是移除对程序运行结果没有任何影响的代码。

其中死码的特点：

代码不会被执行，不可到达
代码执行的结果不会被用到
代码只会影响死变量(只读不写)

其中，tree shaking就是借鉴了这个原理，利用了ES6模块的特点：

其中import、exports只能作为模块顶层的语句出现
import 的模块名只能是字符串常量
import 的模块名是常量不能进行修改

tree shaking就是利用ES6的这一特点，本质就是对静态的模块代码进行分析，所以需要在构建过程中确定哪些模块的代码能利用到，哪些模块不需要进行区分。通过标识不需要使用的代码在uglify阶段删除无用代码。

tree shaking概念和使用

顾名思义，tree shaking摇树优化其中就是类似于摇晃树，过程会使一些枯枝枯叶掉落。

tree shaking就是通过在构建过程，如果一个模块存在多个方法，如果只有其中的某个方法使用到，则将一些没有引用到的代码在这个打包过程移除，只把用到的方法打入bundle中。

通过开启mode:'production'即可。其中，只支持ES6的语法，commonjs的方式(即require方式)不支持使用。

作用域提升：Scope Hoisting

webpack的模块机制

我们可以了解到，webpack打包出来的是一个IIFE(立即调用函数表达式，也是常说的匿名闭包)，其中，modules数组的每一项是一个模块初始化函数，通过webpackrequire的方式来加载模块，返回module.exports，并且通过webpackrequire_(0)的方式启动程序。

scope hoisting原理及使用

在没有开启scope hoisting前，这样构建后的代码会存在大量的闭包代码。

由于模块依赖，通过webpack打包后会转换成自执行匿名函数，这样，由于大量函数闭包包裹代码，会导致体积增大(模块越多就越明显)；运行代码时创建的函数作用域变多，导致内存开销也变大。

其中，scope hoisting的概念也是借鉴了rollup的构建原理并在webpak3.0时候引入，其原理就是将所有模块的代码按照引入顺序放到一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突。这样就可以实现减少函数声明代码和内存花销。

在webpack4中，也只需要把mode状态调整为production即默认开启，其中，需要注意的是只支持ES6语法，commonjs的动态引入还不支持。

而webpack3中则需要配置插件 webpack.optimize.ModuleConcatenationPlugin。

代码分割和动态import

对于一些大型的web应用，将代码打包到一个chunk是不够有效的，会导致加载的文件过大，导致页面加载慢，体验差等。所以需要通过代码分割成多个chunks，当代码运行到需要时候才进行加载。

一般通过抽离相同代码到一个共享块或者脚本懒加载使得初始下载的代码更小。
前面我们已经说到通过SplitChunksPlugin来进行通用的代码抽离，而懒加载脚本的方式我们需要条件判断等方式通过ES6的动态import的方式实现。
其中，动态import目前没有原生支持，需要babel转换。安装依赖并配置.babelrc

npm i @babel/plugin-syntax-dynamic-import -D

配置.babelrc

{
     "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

通过动态import，点击事件加载脚本，demo:

JavaScript语法规范：ESLint

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具，能够及早的发现代码错误并且帮助保持团队代码风格的统一。

其中比较有名的ESLint规范实践有：eslint-config-airbnb、eslint-config-alloy、eslint-config-ivweb等。

可通过基于eslint:recommend配置对规范进行改进。

eslint规则

规则名称	错误级别	说明
for-direction	error	for循环的方向要求必须正确
getter-return	error	getter必须有返回值，并且禁止返回值为undefined，比如return
no-await-in-loop	off	允许在循环里面使用await
no-console	off	允许在代码里面是有console
array-callback-return	error	对于数据相关操作函数比如reduce、map、filter等，callback必须有return
accessor-pairs	warn	在字符串里面出现(和)进行警告

更多规则可参考：https://eslint.orghttps://img.qb5200.com/download-x/docs/rules/

ESLint落地

具体ESLint落地的实施可以有两个方案，通过CI/CD(持续集成/持续交付)系统集成或者和webpack等构建工具集成。

ESLint与CI/CD系统集成

gitlab集成lint的常用做法：

本地开发时可以通过增加precommit钩子实现开发环境的检查。
安装husky并配置package

npm i husky -D

"scripts":{
    "precommit":"lint-staged"
},
"lint-staged":{
    "linters":{
        "*.js": ["eslint-fix","git add"]
    }
}

webpack与ESLint集成

通过使用eslint-loader，构建时检查JS规范。这种做法比较适合新项目的使用。因为该方案会默认在开发构建时对所有文件进行规范的检查。

安装基于react的eslint的依赖包,eslint-config-alloy

npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-alloy

npm i eslint-loader -D

配置.eslintrc.js parser使用babel-eslint，并继承eslint-config-airbnb

npm i eslint-config-airbnb -D

// .eslintrc.js
module.exports = {
    "parser": "babel-eslint",
    "extends": [
        'alloy',
        'alloy/react',
    ],
    "rules": {
        "indent": ["error",4]
    },
    "env": { // 当前生效环境
        "browser": true,
        "node": true
    }
}

打包组件和基础库

webpack不仅可以用来打包应用，也可以用来打包js库来方便我们的日常开发。

实现大整数加法库的打包demo

1、确定打包需求：

需要打包压缩版和非压缩版本
支持script标签/AMD/CJS/ESM模块引入

2、js库的目录结构

.
├── dist   // 打包输出文件夹
|   ├── webpack-larger-number.js    // 未压缩版输出文件
|   └── webpack-larger-number.min.js //压缩版
├── package.json // 依赖包配置说明
├── webpack.config.js  // 打包配置
├── index.js     // 
├── src         // 源码
     └── index.js

3、配置webpack

相对于一般打包应用，我们需要配置output参数实现将库暴露出去，其中，library可以指定库的名称

module.exports = {
    output: {
        filename: "[name].js",
        library: "WebpackLargeNumber", // 指定库的全局变量
        libraryExport: "default", 
        libraryTarget: "umd" // 支持库引入的方式，默认以libary指定的变量名
    }
}

更多详情参数可参考：https://www.webpackjs.com/configuration/output/#output-library

配置webpack，指定.min文件压缩

module.exports  = {
    mode: 'none',
    optimization: {
        minimize: true, // 默认为true，压缩js代码
        minimizer: [
            new TerserPlugin({ // terser-webpack-plugin支持es6语法压缩
                include: /\.min\.js$/
            })
        ]
    }

更多optimization可参考：https://webpack.docschina.org/configuration/optimization/
然后设置入口文件，对于开发环境则引入未打包的js库，而生产环境则使用压缩后的库

4、设置package的入口文件并设置对应环境变量引入不同的库。

// package.js
 "main": "index.js",

// index.js
if (process.env.NODE_ENV == 'production') {
    module.exports = requier('.https://img.qb5200.com/download-x/dist/webpack-large-number.min.js')
} else {
    module.exports = require('.https://img.qb5200.com/download-x/dist/webpack-large-number')
}

最后，我们也可通过npm publish发布到npm上(ps：需要npm账号),然后我们就可以通过npm下载依赖包并且通过默认的导出名WebpackLargeNumber.add('99','2')方式直接使用函数。

大整数加法demo：https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-large-number

优化构建命令行日志:stats + friendly-errors-webpack-plugin

使用webpack打包的时候，默认会将所有的打包构建信息打印出来，而stats选项则可以很好获取部分需要的bundle信息。

常见的stats值：

Preset	Alternative	Description
errors-only	none	只在发生错误时输出
minimal	none	只在发生错误或有新的编译时输出
none	false	没有输出
normal	true	标准输出
verbose	none	全部输出

配置webpack，其中，需要注意的是，对于webpack-dev-server，stats需要放到devServer中。

module.exports = { 
    stats: 'errors-only'
}

通过设置stats为errors-only，我们可以看到dev和build的日志成功的话也没有一些bundle信息，这是，我们可以借助friendly-errors-webpack-plugin对命令行的日志进行优化。

安装friendly-errors-webpack-plugin并配置。

npm i friendly-errors-webpack-plugin -D

配置webpack

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
    plugins: [
        new FriendlyErrorsWebpackPlugin()
    ]
}

构建异常和中断处理

如果打包时候存在一些构建异常和中断，需要捕获并做一些异常提示或者内容上报时候，我们可以通过compiler在每次构建结束后出发done的钩子实现异常的抓捕。

其中，我们需要借助node的process.exit抛出异常，默认情况下， process.exit抛出0表示成功，err为null；而非0则执行失败，其中err为错误信息，code为对应的状态码。