0%
(转载)柯里化与反柯里化
发表于
分类于
FE Basics
本文字数:
4.9k
阅读时长 ≈
4 分钟
原文链接:https://github.com/tcatche/tcatche.github.io/issues/22
柯里化
柯里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。
柯里化,作为高阶函数的一种应用,是一个逐步接收参数的过程。
1 | var add = (x, y) => x + y; |
基于 Generator 与 Promise 的异步编程解决方案
发表于
分类于
FE Basics
本文字数:
1.3k
阅读时长 ≈
1 分钟
先看 async / await 异步解决方案
1 | // sleep 函数,返回一个 Promise 对象 |
通过 babel 编译成 Generator 与 Promise
1 | function _asyncToGenerator(fn) { |
从上相关直观的看出来如何使用 Generator
与 Promise
进行的异步解决方案。
(转载)ES6 系列之 let 和 const
发表于
分类于
FE Basics
本文字数:
4.9k
阅读时长 ≈
4 分钟
数组方法 forEach、filter、every、some、map、reduce 实现等相关记录
发表于
分类于
FE Basics
本文字数:
7.7k
阅读时长 ≈
7 分钟
webpack 4 源码主流程分析(十四):webpack 优化
发表于
分类于
FE Build
本文字数:
5.1k
阅读时长 ≈
5 分钟
前面一至十一章,介绍了在 development
的模式下,整个完整了构建主流程。在了解构建流程的基础上,本章整理一些与 webpack
优化相关的知识点。
production 模式
我们参考 production
模式里,里面已经做了大部分的优化,如压缩,Scope Hoisting
, tree-shaking
等都给予了我们启发,接下来具体分析各个点。
production 模式启用的插件
FlagDependencyUsagePlugin
- 触发时机:
compilation.hooks.optimizeDependencies
- 功能:标记模块导出中被使用的导出,存在
module.usedExports
里。用于Tree shaking
。 - 对应配置项:
optimization.usedExports:true
- 触发时机:
FlagIncludedChunksPlugin
- 触发时机:
compilation.hooks.optimizeChunkId
- 功能:给每个
chunk
添加了ids
,用于判断避免加载不必要的chunk
- 触发时机:
ModuleConcatenationPlugin
- 触发时机:
compilation.hooks.optimizeChunkModules
- 功能:使用
esm
语法可以作用域提升(Scope Hoisting
)或预编译所有模块到一个闭包中,提升代码在浏览器中的执行速度 - 对应配置项:
optimization.concatenateModules:true
- 触发时机:
NoEmitOnErrorsPlugin
- 触发时机:
compiler.hooks.shouldEmit
,compilation.hooks.shouldRecord
- 功能:如果在
compilation
编译时有error
,则不执行Record
相关的钩子,并且抛错和不编译资源
- 触发时机:
OccurrenceOrderModuleIdsPlugin
,OccurrenceOrderChunkIdsPlugin
- 注意不是文档写的
OccurrenceOrderPlugin
,这个没用 - 触发时机:
compilation.hooks.optimizeModuleOrder
,compilation.hooks.optimizeChunkOrder
- 功能:根据模块初始调用次数或者总调用次数排序(配置),这样在后面分配
ID
的时候常被调用ID
就靠前,除此之外,还可以让id
为路径,hash
等。 - 对应配置项:
optimization.occurrenceOrder
,optimization.chunkIds
,optimization.moduleIds
- 注意不是文档写的
SideEffectsFlagPlugin
- 触发时机:
normalModuleFactory.hooks.module
,compilation.hooks.optimizeDependencies
- 功能:
normalModuleFactory.hooks.module
钩子里读取package.json
里的sideEffects
字段和读取module.rule
里的sideEffects
赋给module.factoryMeta
(纯的ES2015
模块);compilation.hooks.optimizeDependencies
钩子里根据sideEffects
配置,删除未用到的export
导出
- 对应配置项:
optimization.sideEffects:true
(默认)
- 触发时机:
TerserPlugin
- 触发时机:
template.hooks.hashForChunk
,compilation.hooks.optimizeChunkAssets
- 功能:
- 在
template.hooks.hashForChunk
钩子即在chunks
生成hash
阶段会把压缩相关的信息也打入到里面 - 在
compilation.hooks.optimizeChunkAssets
钩子触发资源压缩事件
- 在
- 对应配置项:
optimization.minimize
是否开启压缩optimization.minimizer
定制Terser
,默认开启多进程压缩和缓存
- 触发时机:
webpack 4 源码主流程分析(十三):watch
发表于
分类于
FE Build
本文字数:
6.6k
阅读时长 ≈
6 分钟
webpack 4 源码主流程分析(十二):打包后文件解析
发表于
分类于
FE Build
本文字数:
16k
阅读时长 ≈
15 分钟
以 前言及总流程概览
里的 demo
为例, 前十一张章分析了打包过程,现在来分析它打包后的文件。
demo
1 | //src/a.js |
1 | //src/b.js |
1 | //src/c.js |
webpack 4 源码主流程分析(十一):文件的生成
发表于
分类于
FE Build
本文字数:
3.2k
阅读时长 ≈
3 分钟
webpack 4 源码主流程分析(十):资源的构建
发表于
分类于
FE Build
本文字数:
8.1k
阅读时长 ≈
7 分钟