上一篇，总结了 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 优化，从两个方面来优化：
- 速度优化
- 体积优化
网友评论