如何消除无用代码；打包本身的私有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.org/docs/rules/

ESLint落地