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. 体积优化

你可能感兴趣的:(webpack4.0 进阶)