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（作用域提升）

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

问题：

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

模块转换分析

image.png

1. 被 webpack 转换后的模块会带上一层包裹
2. 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 优化，从两个方面来优化：

1. 速度优化
2. 体积优化