Today I Learned (2022)

2022/01/19

2022-01-17

如果在同一个 webpack 配置文件中以数组的形式导出多份配置时,webpack 并不会按照数组中的顺序来打包——而是并发构建。如果后续的打包需要用到前面的打包产物,那么可以给所有的配置起个不同的名称(通过 name 属性),然后在后续的打包配置中添加 dependencies 属性,该属性的值是一个数组,我们可以在里面指定当前配置需要「依赖」哪些配置,从而保证顺序。

参考:https://webpack.js.org/configuration/configuration-types/#dependencies

2022-04-23

HTML minifier 中有一个叫 sortClassName 的选项。开启这个选项后 HTML minifier 会帮我们对 HTML 中的 class 进行重排。虽然对 class 重排并不会让最终生成的 HTML 变得更小,但重复出现的字符序列有利于 gzip 进行优化,也就是让 gzip 后的体积变小。

sortAttributes 选项的作用和意图也一样。

参考:html-minifier 的解释

2022-04-24

如果一个函数的函数体内包含 'use strict' 指令(directive)并且该函数的参数列表不是一个「简单参数列表」(SimpleParameterList),
这将会导致一个 early error。

那怎样才算是或不是「简单参数列表」呢?举一些常见的例子:

function f1([x]) {}
function f2({ x }) {}
function f3(x = 3) {}
function f4(...x) {}

像上面的,某个参数带有对象解构或数组解构,或某个参数带有默认值,或带有 rest parameter,即 不是「简单参数列表」。

function f1() {}
function f2(a) {}

像上面的,函数没有参数,或参数列表中每个参数都只是一个标识符(Identifier),即为「简单参数列表」。

参考:

  1. ECMAScript 关于如何判断函数是否有 'use strict' 指令
  2. ECMAScript 关于如何判断参数列表是否为 SimpleParameterList
  3. ECMAScript 中与函数声明(FunctionDeclaration)和函数表达式(FunctionExpression)有关的 early errors,其中第 3 点即为此行为
  4. ECMAScript 中与箭头函数(ArrowFunction)有关的 early errors,其中第 3 点即为此行为