优化 webpack 配置，提高打包速度，减少打包体积。

一些插件

• DLL
• moment-locales-webpack-plugin
• mini-css-extract-plugin
• thread-loader

loader

• image-webpack-loader
  压缩图片
• url-loader
  将图片转出 base64

babel

• babel-import-plugin

模块使用

• lodash-es

配置

• cache
• sourcemap

参考资料

• Optimize your libraries with webpack

JavaScript 中就存在 Hoisting，将“变量声明”和“函数声明”提升到作用域顶部，Webpack 的 Scope Hoisting 也是类似的道理，将引入模块提升到当前模块声明，减少引入模块的声明，减少函数声明，缩小体积。

参考资料

• Scope Hoisting 配置

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 词汇表
• What are module, chunk and bundle in webpack?

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 output 的 filename 和 chunkFilename 配置时，使用合理的 hash 值有利于浏览器的缓存，减少二次加载时的文件数量。

filename 是对打包后 bundle 名称进行配置，chunkFilename 是对切割出来的 chunk 名称进行配置。

Read More

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

Read More

Object

Object 是 key-value 的数据结构，与 JSON 结构一样。点击链接可查看以下示例

• 记录器
  有时候我们也把 Object 当做一个记录器，例如记录某个列表的状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

   const list = [
     {
       id: 1
     },
     {
       id: 2
     }
   ];

   const obj = {};

   list.forEach((item) => {
     obj[item.id] = item.id > 1 ? true : false;
   });

console.log(obj); // {1: false, 2: true}

Read More

什么是 Flux

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

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

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

Read More

参数传递

Redux createStore 是 Redux 初始化函数，在参数传递时有个有意思的实现。

判断 preloadState 是否为函数，如果为函数将其作为 enhancer 处理，并重新赋值 preloadState 为 undefined。

Read More

flux-concepts

These are the important high-level concepts and principles you should know
about when writing applications that use Flux.

Read More