webpack4.0 进阶

上一篇，总结了 webpack4.0 基础，其中包括：

核心的 entry、output、mode、loaders、plugins；
解析图片、字体；解析Css、Less、Sass
文件指纹策略：hash、contenthash、chunkhash
代码压缩

接下来，我总了一些进阶方案，记录分享下～

px 自动转rem

W3C 对 rem 的定义：font-size of the root element
rem 对 px 的对比：rem 是相对单位，px 是绝对单位

我们的页面里面可以使用 px2rem-loader 插件来页面渲染计算跟元素的 font-size 值，其中手淘的 lib-flexible 库，可以动态设置根元素的 px 值。

如图是 px2rem-loader 写法：

image.png

remUnit：rem 相对 px 转换的单位，1 rem = 75px
remPrecision： px 转 rem 小数点之后的位数

Tree Shaking（摇树优化）

概念：只把用到的方法打入 bundle，没用到的会在 uglify 阶段被擦除掉
无用代码消除在传统的编程语言编译器中，编译器可以判断某些代码不影响输出，进行消除，称为 DCE。而 Tree-shaking 是 DCE 的一种新实现

DCE（dead code elimination）：无用代码消除

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

优点：减少程序提交／减少程序执行时间／便于将来程序优化

Tree Shaking 的消除原理是依赖于 ES6 模块特性

import export 只能作为模块顶层的语句出现
import 的模块名只能是字符串常量，不能动态设置
import 模块是不可以修改的

基础：本质是对模块进行静态分析，和运行状态无关

Tree Shaking 使用：

webpack 默认支持，在 .babelrc 里设置 modules： false 即可
mode 为 production 情况下默认开启，none 就关闭

详解：https://zhuanlan.zhihu.com/p/32554436

Scope Hositing（作用域提升）

现象：构建后的代码存在大量的闭包代码

问题：

大量函数闭包包裹代码，导致 bundle 体检增大
运行代码时创建函数作用域变多，内存开销变大

模块转换分析

image.png

被 webpack 转换后的模块会带上一层包裹
import 会被转换成 webpack_require；export 会被转换成 webpack_exports

模块机制分析

image.png

打包出来的是一个 IIFE（匿名闭包）
modules 是一个数组，每一项是一个模块初始化函数，__webpack_require 用来加载模块，返回 module.exports 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序

原理：分析模块之间的依赖关系，被引用了的模块进行合并到一个函数中

对比：使用 scope hositing 可以减少函数声明代码和内存开销。打包出来的代码文件更小、运行更快

使用：

webpack4 mode 为 production 默认开启
webpack 3 需要依赖 webpack.optimize.ModuleConcatenationPlugin() 插件
必须是 ES6语法，CSJ 不支持

优化构建命令行的显示日志

插件：friendly-errors-webpack-plugin
统计信息 stats

image.png

下篇我们总结 wepack4.0 优化，从两个方面来优化：

速度优化
体积优化

webpack4.0 进阶

上一篇，总结了 webpack4.0 基础，其中包括：

px 自动转rem

Tree Shaking（摇树优化）

DCE（dead code elimination）：无用代码消除

Tree Shaking 的消除原理是依赖于 ES6 模块特性

Tree Shaking 使用：

Scope Hositing（作用域提升）

现象：构建后的代码存在大量的闭包代码

问题：

模块转换分析

模块机制分析

原理：分析模块之间的依赖关系，被引用了的模块进行合并到一个函数中

对比： 使用 scope hositing 可以减少函数声明代码和内存开销。打包出来的代码文件更小、运行更快

使用：

优化构建命令行的显示日志

推荐阅读更多精彩内容

对比：使用 scope hositing 可以减少函数声明代码和内存开销。打包出来的代码文件更小、运行更快