webpack chunk 与 bundle

chunk 和 bundle 都是 webpack 的重要概念,今天我们来理解它们。

chunk

来自 webpack 词汇表的诠释:

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don’t yield a one-to-one relationship.

chunk 是 webpack 内部用于管理打包过程的一个特定名词,也就是 chunk 是一个打包过程的概念,。bundle 是由 chunk 组成的,一般 bundle 和 chunk 一一对应,但是由其他配置会改变一一对应关系,也就是一个 bundle 可以对应多个 chunk。

bundle

来自 webpack 词汇表的诠释:

Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

bundle 是源代码的最终产物,已经经历过加载和编译过程。

总结

chunk 是打包过程描述代码块的概念,bundle 是打包的最终产物,bundle 可以被切割成多个 chunk,实现打包优化。例如将异步模块打包成独立的 chunk,实现按需求加载。

参考资料

webpack entry 配置

entry 是 webpack 打包项目的入口,可配置打包单个文件或者文件,可使用 dependOn 与其他 入口 chunk 共享模块。

以下大部分例子可参考这个项目的 entry 工程。

默认 entry

webpack 4 之后,为了简化配置,其 entry 值默认为 ./src/index.js,此路径是相当于 webpack 配置文件。

同时其 output 值为 ./dist/main.js

entry 使用字符串或者字符串数组配置

当使用字符串或者字符串数组进行配置时,由于其默认 output 名称都为 main.js,若存在多个入口文件,则都会打包在一起成为 main.js 文件。

1
entry: ["./src/page1.js", "./src/page2.js"],

entry 使用对象进行配置,对象的 key 将作为文件名

1
2
3
4
entry: {
page1: "./src/page1.js",
page2: "./src/page2.js",
},

打包后将生成文件:

1
2
./dist/page1.js
./dist/page2.js

Read More

Webpack Tree Shaking 配置

Tree Shaking 翻译过来就是“摇树”。我们可以想象一下,对着一棵梨树的树干摇一摇,树上成熟的梨子就会掉下来。webpack 使用 Tree Shaking 处理代码,结合 ES6 模块静态引入依赖关系确定的特点,对代码进行静态分析,将那些没有用到的代码(Dead Code)“摇出来”——删掉。

Read More

什么是 Redux——1

什么是 Flux

Flux 是 Facebook 用来构建客户端渲染 web 应用的应用框架。Flux 最重要的概念就是单向数据流,Flux 使用单向数据流来补充 React 的可组合式组件。相比一个正式的框架,它更像一种范式和思想,Redux 则是这种范式和思想的具体实现,当然 Redux 不严格遵循 Flux 的设定。

Flux 具有严格的单向数据流,Store 里数据的变化,只能是由 Dispatcher 派发的 Action 触发的。这保证了应用的状态是可预测的,避免了应用混乱的情况,让整个流程变得清晰简单。

当然,严格的单向数据流一方面增加开发者的学习成本,另一方面也增加了代码量,所以往往复杂的项目才需要使用 Flux 架构。

Read More

React 合成事件源码阅读

React 合成事件是基于事件委托机制,构建的自定义事件体系。将需要监听的事件类型都收集起来放在 document 元素上,待事件触发通过 event.target 将事件分发给相关元素。

以下是分发时收集相关元素代码,包括两次遍历和获取父元素:

Read More