chore(alita): 更新文档

CHANGELOG.md

@@ -1,3 +1,30 @@
+## [2.2.1](https://github.com/areslabs/alita/compare/2.0.3...2.2.1) (2020-01-03)
+
+
+### Bug Fixes
+
+* **alita:** 2个组件 + defaut导出 判断错误的bug ([f4635dc](https://github.com/areslabs/alita/commit/f4635dc))
+* **alita:** 传递路径给extract** ，修改认为传递来的是对象的bug ([44b77ab](https://github.com/areslabs/alita/commit/44b77ab))
+* **alita:** 修复window平台下 usingComponents路径错误 ([efe12c1](https://github.com/areslabs/alita/commit/efe12c1))
+* **wx-react:** 修复复用逻辑的bug ([1e6d9c1](https://github.com/areslabs/alita/commit/1e6d9c1))
+
+
+### Features
+
+* **alita:** add webpack mini-program target ([9c7ea8b](https://github.com/areslabs/alita/commit/9c7ea8b))
+* **alita:** version 2.20 ([228620d](https://github.com/areslabs/alita/commit/228620d))
+* **alita:** watch模式下 保证chunk变化的时候，组件usingCOmponent关系正确 ([1f78b78](https://github.com/areslabs/alita/commit/1f78b78))
+* **alita:** watch模式下，wxComponent 目录的删除 ([707110e](https://github.com/areslabs/alita/commit/707110e))
+* **alita:** webpack入口 添加splitChunks用来分async包，添加miniprogramTarget ([f92a0f8](https://github.com/areslabs/alita/commit/f92a0f8))
+* **alita:** 入口文件添加 subpage 分包处理逻辑 ([4f0044f](https://github.com/areslabs/alita/commit/4f0044f))
+* **alita:** 分chunk生成小程序文件 ([b5d5ffb](https://github.com/areslabs/alita/commit/b5d5ffb))
+* **alita:** 根据chunk  copy wxComponents目录，并提供getCompPath 方法 ([44d735e](https://github.com/areslabs/alita/commit/44d735e))
+* **alita:** 添加module chunks字段 ([402f81e](https://github.com/areslabs/alita/commit/402f81e))
+* **alita:** 添加收集模块的jsonRelativeFiles信息 ([8b23d81](https://github.com/areslabs/alita/commit/8b23d81))
+* **wx-react:** 增加对异步分包模式的支持 ([bef4e72](https://github.com/areslabs/alita/commit/bef4e72))
+
+
+
 ## [2.1.1](https://github.com/areslabs/alita/compare/2.0.3...2.1.1) (2019-12-20)
 提取alita-core，提取alita-cli， 这样把webpack安装在项目目录下， 方便与react-native-web 集成
 

README.md

@@ -34,6 +34,7 @@ Alita不是新的框架，也没有提出新的语法规则，她只做一件事
 
 ## Features
 * 完备的React语法支持。runtime阶段处理JSX语法，对JSX支持更加完善，可以在组件内任何地方出现JSX片段，包括属性传递JSX片段，render方法之外的JSX片段等等， 
+* [基于webpack打包构建](https://areslabs.github.io/alita/基于webpack构建.html)，完善小程序npm能力，支持对小程序包体积分析，[一键自动小程序分包](https://areslabs.github.io/alita/一键自动小程序分包.html)等
 * `React`生命周期
 * `React Native`组件/API
 * [动画](https://areslabs.github.io/alita/%E5%8A%A8%E7%94%BB.html)

docs/SUMMARY.md

@@ -28,11 +28,12 @@
 * [第三方组件库扩展](./第三方组件库扩展.md)
 * [原生组件扩展](./原生组件扩展.md)
 * [已有项目集成](./已有项目集成.md)
-* [小程序分包集成](./小程序分包集成.md)
+* [一键自动小程序分包](./一键自动小程序分包.md)
 * [小程序体积优化](./小程序体积优化.md)
 
 * [其他]()
    * [Alita-ui组件库](./Alita组件库.md)
    * [mini-react与小程序的数据交换方式](./mini-react与小程序的数据交换方式.md)
    * [一种让小程序支持JSX语法的新思路](./一种让小程序支持JSX语法的新思路.md)
+   * [基于webpack构建](./基于webpack构建.md)
 

docs/一键自动小程序分包.md

@@ -0,0 +1,31 @@
+## 一键自动分包
+
+Alita小程序的分包是比较简单的，假定有如下页面： 
+
+```javascript
+
+<Router>
+    <Route key={"A"} component={A}/>
+    <Route key={"B"} component={B}/>
+    <Route key={"C"} component={C}/>
+    <Route key={"D"} component={D}/>
+    <Route key={"E"} component={E}/>
+</Router>
+```
+
+如若想把B，C分为一个包， D， E分为一个包。
+
+那么只需： 
+
+```javascript
+
+<Router>
+    <Route key={"A"} component={A}/>
+    <Route subpage="sp1" key={"B"} component={B}/>
+    <Route subpage="sp1" key={"C"} component={C}/>
+    <Route subpage="sp2" key={"D"} component={D}/>
+    <Route subpage="sp2" key={"E"} component={E}/>
+</Router>
+```
+
+注意： Tab页无论怎么配置`subpage` 都属于主包

docs/基于webpack构建.md

@@ -0,0 +1,68 @@
+## 基于webpack构建
+自2.x版本以后，`Alita`改为基于`webpack`打包构建，借助于`webpack`的特性，2.x版本的`Alita`更加简单易用。
+
+### 完善npm包支持
+微信小程序有一套自己的`npm`包使用方式，这种方式并不完全和官方`npm`兼容，这会导致很多常见的包不能直接在小程序平台使用。比如很多包都是以如下的方式提供
+
+```javascript
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./index.production.min.js');
+} else {
+  module.exports = require('./index.development.js');
+}
+```
+但是微信小程序平台并不支持`process.env.NODE_ENV`，导致以上的包无法使用，会报错`Uncaught ReferenceError: process is not defined`。
+
+另外小程序怪异的`npm`包使用方式，要求其在安装之后手动执行`npm构建`过程，这给本地开发调试包带了很多麻烦。
+
+`Alita`基于`webpack`的打包等于是移除了对小程序`npm`能力的依赖，整个打包过程更加可控。另外借助于`webpack`灵活的`loader/plugin`机制，可以实现诸多常见特性。比如借助`DefinePlugin`插件就可以处理`process.env.NODE_ENV`，实现在开发模式/生产模式下加载不同包的需求。
+
+```javascript
+new webpack.DefinePlugin({
+  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+});
+```
+### 小程序体积分析及优化
+我们知道微信小程序的体积是有限制的，不能超过2M。通过`Alita`运行的小程序上当然也有这样的限制，好在`webpack`内置了`tree-shaking`，但是仍然会有体积超过2M的情况，此时如何减少小程序大小呢？首先需要知道每一个文件、每一个包占据了多少空间。借助`webpack`的`BundleAnalyzerPlugin`插件（`Alita`内置了这个插件），事情变得非常简单，只需要在执行`Alita`打包命令的时候添加 
+`--analyzer` 参数即可。下面是`Alita`提供的案例代码`Todo`，添加`--analyzer` 参数之后的大小分布结构。
+
+![图片](./static/todo-pro.jpg)
+
+有了这份大小分布图，优化变得有的放矢。这里`lodash`库占据了很多空间，有500多KB。实际上，通过分析发现只有`redux-promise`引用了`lodash` ,使用了个别的`lodash`库方法，我们可以发布一个简单的包 `redux-promise-nolodash` 替换一下即可。再次执行 `alita --analyzer` ，结果如下，`bundle`的大小由700多KB，降到了200多KB：
+
+![图片](./static/todo-nopro.jpg)
+
+上面的方式，需要手动把代码中对`redux-promise`的引用改为`redux-promise-nolodash`，当文件很大项目已经成熟的时候，显然不太方便。更简单的，由于`Alita`基于`webpack`构建打包，所以`webpack`的配置字段基本上可以在`Alita`的配置文件中复用，只需要配置`resove alias` 字段即可：
+
+```javascript
+module.exports = {
+    resolve: {
+        alias: {
+            "redux-promise": "redux-promise-nolodash",
+        }
+    }
+}
+```
+### 一键自动小程序分包
+有时当小程序越发复杂的时候，体积的确是需要超过2M的，此外为了减少首屏加载时长，需要减少初次加载的内容。这就需要使用到分包的能力，使用分包以后小程序体积可以支持到12M。小程序的分包如下： 
+
+![图片](./static/sp.jpg)
+
+小程序要求你在分包的时候，主从包的依赖必须手动管理好，比如分包A不能依赖分包B的代码，当业务越发复杂，每一个模块之间的依赖关系将变的特别复杂，这给小程序原生的手动分包带来了很多麻烦，比如我们必须手动把共用依赖提取到主包中维护等诸如此类。 
+
+但是，管理模块依赖是`webpack`的**强项**！`webpack`很早就有提取公共模块拆分包的插件`CommonsChunkPlugin`，`webpack4.0`以后更是提供了更加强大的`SplitChunkPlugin`，基于`SplitChunkPlugin`插件`Alita`实现了非常易用的自动分包。比如：
+
+```javascript
+<Router>
+    <Route key={"A"} component={A}/>
+
+    <Route subpage={'sub1'} key={"B"} component={B}/>
+    <Route subpage={'sub1'} key={"C"} component={C}/>
+
+    <Route subpage={'sub2'} key={"D"} component={D}/>
+    <Route subpage={'sub2'} key={"E"} component={E}/>
+</Router>
+```
+只需要在路由配置中添加`subpage`属性即可！如上的配置，`Alita`将把你的目标小程序分成3个包：主包包含A页， sub1分包保护B，C页，sub2包含D，E页。共用依赖模块将会被提取到主包，而B，C单独依赖模块项将只会在sub1分包存在，整个过程不需要任何的手动干预，也不需要开发者自己去管理模块直接的依赖关系。 
+
+借助于`webpack`灵活的`plugin/loader`机制，整个`Alita`构建打包的过程更加可控，扩展功能更加方便。官方及社区丰富的插件，也帮助我们实现了自动分包，包体积分析优化等诸多功能。