皮皮网

1.代码拆分-使用SplitChunks
2.源码级解析，源码搞懂 React 动态加载（上） —— React Loadable
3.一文带你快速上手Rollup
4.有一个APP的源码源代码怎么运营
5.请教下，ADT-Bundle的源码eclipse中怎么修改编码格式？

代码拆分-使用SplitChunks

       前言

       探索代码优化的世界，最近开始接触项目优化工作，源码其中涉及三方组件的源码拆分。在未进行拆分前，源码ijkplayer的源码分析可能存在两个场景：单一js文件过大，源码影响缓存效率；无法有效管理第三方库。源码利用`splitChunks`工具，源码可以将模块进行分割，源码并提取重复代码，源码解决上述问题。源码

       概念区分 - module、源码bundle、源码chunk

       深入理解`splitChunks`之前，源码先梳理几个概念。module：模块，在webpack中，任何文件都可视为模块，需要配置loader将其转换为支持打包的文件。chunk：编译完成待输出时，webpack将module按特定规则组合成一个个chunk。bundle：webpack处理完chunk文件后，生成供浏览器运行的代码。

       chunk与bundle的关系

       探析chunk的构成与bundle之间的关联。chunk有两种形式：初始化（initial）chunk，即入口起点的主chunk，包含入口起点及其依赖的所有模块；非初始化（non-initial）chunk，用于延迟加载，可能在使用动态导入或`SplitChunksPlugin`时出现。

       通过入口产生的chunk

       假设目录结构如下：index.js, another-module.js, webpack.config.js, package.json添加script配置，运行webpack并使用ndb追踪代码执行。通过命令启动浏览器，点击播放按钮执行build命令，追踪chunk到bundle的linux yum 源码流转。

       chunk处理步骤概览

       从`Compilation`类的`seal`方法出发，首先搜集chunks，然后调用`createChunkAssets`方法生成source，为输出文件做准备；通过`compilation.emitAssets`方法记录资源信息到`compilation.assets`对象；一系列回调最终调用`onCompiled`方法，将assets信息写入输出目录，生成bundle文件。

       Demo2 - 动态导入

       将`index.js`中的lodash通过`import`方式导入，动态导入返回promise，通过`then`获取导入信息。修改`webpack.config.js`入口为单个`index.js`。源码追踪显示，初始化文件新增一个名为`index`的chunk，但在模块分析中识别到`import`方式，为`index.js`模块增加了`AsyncDependenciesBlock`标记，经过处理生成一个名为`null`的chunk。

       总结：`chunk`是源代码中的抽象，封装定义如何将模块组写入文件，而`bundle`则是输出目录的文件。

       解决隐患 - `splitChunks`配置

       在上述示例中，存在三方模块重复引用的问题。通过简单的`optimization.splitChunks`配置，实现了lodash的抽离，降低了单个入口文件的大小。总结使用心得，`splitChunks`主要用于代码优化，针对不同场景配置`chunks`选项，如`all`、`async`、`initial`以及自定义函数，以达到高效拆分效果。

       比较`async`、`initial`、`all`的区别

       在示例中增加`another.js`，静态导入lodash，指读 源码对比`async`、`all`、`initial`的不同效果。默认情况下，`initial`影响HTML文件中的脚本标签，而`async`仅针对动态导入，`all`则考虑更多场景，适合存在复用模块的情况，但需权衡动态导入及其内部依赖的抽离。

       splitChunks.cacheGroups

       在使用`splitChunks`基础上，通过`cacheGroups`实现更细粒度的代码拆分，进一步优化项目结构。

       总结

       通过`splitChunks`配置，实现三方组件的高效管理与拆分，优化代码结构与加载效率。理解模块、bundle、chunk之间的关系，以及如何利用`splitChunks`与`cacheGroups`进行代码拆分与优化，是提升项目性能的关键步骤。

源码级解析，搞懂 React 动态加载（上） —— React Loadable

       本系列深入探讨SPA单页应用技术栈，首篇聚焦于React动态加载机制，解析当前流行方案的实现原理。

       随着项目复杂度的提升和代码量的激增，如企业微信文档融合项目，代码量翻倍，性能和用户体验面临挑战。SPA的特性使得代码分割成为优化代码体积的关键策略。

       code-splitting原理在于将大型bundle拆分为多个，实现按需加载和缓存，显著降低前端应用的加载体积。ES标准的import()函数提供动态加载支持，babel编译后，ape 解码 源码import将模块内容转换为ESM数据结构，通过promise返回，加载后在then中注册回调。

       webpack检测到import()时，自动进行code-splitting，动态import的模块被打包到新bundle中。通过注释可自定义命名，如指定bar为动态加载bundle。

       实现简易版动态加载方案，利用code-splitting和import，组件在渲染前加载，渲染完成前展示Loading状态，优化用户体验。然而，复杂场景如加载失败、未完成等需要额外处理。

       引入React-loadable，动态加载任意模块的高阶组件，封装动态加载逻辑，支持多资源加载。通过传入参数如模块加载函数、Loading状态组件，统一处理动态加载成功与异常。

       通过react-loadable改造组件，实现加载前渲染Loading状态，加载完成后更新组件。支持单资源或多资源Map动态加载，兼容多种场景。

       Loadable核心是createLoadableComponent函数，采用策略模式，根据不同场景（单资源或多资源Map）加载模块。load方法封装加载状态与结果，loadMap方法加载多个loader，返回对象。慢速威廉 源码

       LoadableComponent高阶组件实现逻辑简单，通过注册加载完成与失败的回调，更新组件状态。默认渲染方法为React.createElement()，使用Loadable.Map时需显式传入渲染函数。

       在服务端渲染（SSR）场景下，动态加载组件无法准确获取DOM结构，react-loadable提供解决方案，将异步加载转化为同步，支持SSR。

       React loadable原始仓库不再维护，局限性体现在适用的webpack与babel版本、兼容性问题以及不支持现代React项目。针对此问题，@react-loadable/revised包提供基于Hooks与ts重构的解决方案。

       React-loadable的实现原理与思路较为直观，下文将深入探讨React.lazy + Suspense的原生解决方案，理解Fiber架构中的动态加载，有助于掌握更深层次的知识。

一文带你快速上手Rollup

       项目中一直用的都是webpack，前一段需要开发几个类库供其他平台使用,本来打算继续用webpack的，但感觉webpack用来开发js库，不仅繁琐而且打包后的文件体积也比较大。正好之前看vue源码，知道vue也是通过rollup打包的。这次又是开发类库的，于是就快速上手了rollup。

       什么是rollup？

       关于rollup的介绍，官方文档已经写的很清楚了：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

       与Webpack偏向于应用打包的定位不同，rollup.js更专注于Javascript类库打包。

       我们熟知的Vue、React等诸多知名框架或类库都是通过rollup.js进行打包的。

       为什么是rollup？

       webpack我相信做前端的同学大家都用过，那么为什么有些场景还要使用rollup呢？这里我简单对webpack和rollup做一个比较：

       总体来说webpack和rollup在不同场景下，都能发挥自身优势作用。webpack对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)，而rollup并不支持。

       所以当开发应用时可以优先选择webpack，但是rollup对于代码的Tree-shaking和ES6模块有着算法优势上的支持，若你项目只需要打包出一个简单的bundle包，并是基于ES6模块开发的，可以考虑使用rollup。

       其实webpack从2.0开始就已经支持Tree-shaking，并在使用babel-loader的情况下还可以支持es6 module的打包。实际上，rollup已经在渐渐地失去了当初的优势了。但是它并没有被抛弃，反而因其简单的API、使用方式被许多库开发者青睐，如React、Vue等，都是使用rollup作为构建工具的。

       快速上手

       我们先花大概十分钟左右的时间来了解下rollup的基本使用以及完成一个hello world。

       安装

       首先全局安装rollup：

       接着，我们初始化一个如下所示的项目目录

       首先我们在src/index.js中写入如下代码：

       然后在命令行执行以下命令：

       执行命令，我们即可在dist目录下生成bundle.js文件：

       这时，我们再在example/index.html中引入上面打包生成的bundle.js文件，打开浏览器：

       如我们所预料的，控制台输出了柯森。

       到这里，我们就用rollup打包了一个最最简单的demo。

       可能很多同学看到这里对于上面命令行中的参数不是很明白，我依次说明下：

       其实除了这两个，还有很多其他常用的命令（这里我暂且列举剩下两个也比较常用的，完整的 rollup 命令行参数）：

       使用配置文件(rollup.config.js)

       使用命令行的方式，如果选项少没什么问题，但是如果添加更多的选项，这种命令行的方式就显得麻烦了。

       为此，我们可以创建配置文件来囊括所需的选项

       在项目中创建一个名为rollup.config.js的文件，增加如下代码：

       然后命令行执行：

       打开dist/bundle.js文件，我们会发现和上面采用命令行的方式打包出来的结果是一样的。

       这里，我对配置文件的选项做下简单的说明：

       到这里，相信你已经差不多上手rollup了。

       进阶

       但是，这对于真实的业务场景是远远不够的。

       下面，我将介绍rollup中的几种常用的插件以及external属性、tree-shaking机制。

       resolve插件

       为什么要使用resolve插件

       在上面的入门案例中，我们打包的对象是本地的js代码和库，但实际开发中，不太可能所有的库都位于本地，我们大多会通过npm下载远程的库。

       与webpack和browserify这样的其他捆绑包不同，rollup不知道如何打破常规去处理这些依赖。因此我们需要添加一些配置。

       resolve插件使用

       首先在我们的项目中添加一个依赖the-answer，然后修改src/index.js文件:

       执行npm run build。

       这里为了方便，我将原本的rollup -c -w添加到了package.json的scripts中："build": "rollup -c -w"

       会得到以下报错：

       打包后的bundle.js仍然会在Node.js中工作，但是the-answer不包含在包中。为了解决这个问题，将我们编写的源码与依赖的第三方库进行合并，rollup.js为我们提供了resolve插件。

       首先，安装resolve插件：

       修改配置文件rollup.config.js：

       这时再次执行npm run build，可以发现报错已经没有了：

       打开dist/bundle.js文件：

       打包文件bundle.js中已经包含了引用的模块。

       有些场景下，虽然我们使用了resolve插件，但可能我们仍然想要某些库保持外部引用状态，这时我们就需要使用external属性，来告诉rollup.js哪些是外部的类库。

       external 属性

       修改rollup.js的配置文件：

       重新打包，打开dist/bundle.js文件：

       这时我们看到the-answer已经是做为外部库被引入了。

       commonjs插件

       为什么需要commonjs插件

       rollup.js编译源码中的模块引用默认只支持 ES6+的模块方式import/export。然而大量的npm模块是基于CommonJS模块方式，这就导致了大量 npm模块不能直接编译使用。

       因此使得rollup.js编译支持npm模块和CommonJS模块方式的插件就应运而生：@rollup/plugin-commonjs。

       commonjs插件使用

       首先，安装该模块：

       然后修改rollup.config.js文件：

       babel插件

       为什么需要babel插件？

       我们在src目录下添加es6.js文件(⚠️ 这里我们使用了 es6 中的箭头函数)：

       然后修改rollup.config.js配置文件：

       执行打包，可以看到dist/esBundle.js文件内容如下：

       可以看到箭头函数被保留下来，这样的代码在不支持ES6的环境下将无法运行。我们期望在rollup.js打包的过程中就能使用babel完成代码转换，因此我们需要babel插件。

       babel插件的使用

       首先，安装：

       同样修改配置文件rollup.config.js：

       然后打包，发现会出现报错：

       提示我们缺少@babel/core，因为@babel/core是babel的核心。我们来进行安装：

       再次执行打包，发现这次没有报错了，但是我们尝试打开dist/esBundle.js：

       可以发现箭头函数仍然存在，显然这是不正确的，说明我们的babel插件没有起到作用。这是为什么呢？

       原因是由于我们缺少.babelrc文件，添加该文件：

       我们看.babelrc配置了preset env，所以先安装这个插件：

       这次再次执行打包，我们打开dist/esBundle.js文件：

       可以看到箭头函数被转换为了function，说明babel插件正常工作。

       json插件

       为什么要使用json插件？

       在src目录下创建json.js文件：

       内容很简单，就是引入package.json，然后去打印author字段。

       修改rollup.config.js配置文件：

       执行打包，发现会发生如下报错：

       提示我们缺少@rollup/plugin-json插件来支持json文件。

       json插件的使用

       来安装该插件：

       同样修改下配置文件，将插件加入plugins数组即可。

       然后再次打包，发现打包成功了，我们打开生成的dist/jsonBundle目录：

       完美！！

       tree-shaking机制

       这里我们以最开始的src/index.js为例进行说明：

       修改上述文件：

       执行打包。打开dist/bundle.js文件：

       再次修改src/index.js文件：

       再次执行打包，打开打包文件：

       发现了什么？

       我们发现关于变量b的定义没有了，因为源码中并没有用到这个变量。这就是ES模块著名的tree-shaking机制，它动态地清除没有被使用过的代码，使得代码更加精简，从而可以使得我们的类库获得更快的加载速度。

       总结

       本文大致向大家介绍了什么是rollup以及如何快速上手rollup。文中提到的这些其实只是冰山一角，rollup能玩的东西还有很多，关于更多可以去 rollup 官网查询。

有一个APP的源代码怎么运营

       1、首先需要下载一个APP的开发工具，这里使用的是开发安卓的ADT-bundle工具。

       2、打开这个开发工具，然后创建一个项目。

       3、然后输入项目的APP名称，项目名称，包名，点击下一步。

       4、然后这一步是选择SDK的版本，默认既可以了，直接点击下一步。

       5、然后这一步是选择APP的图标，选择完成之后点击下一步。

       6、然后这一步是选择界面的模版，这里选择空白模版“Blank Activity”既可以了，点击下一步。

       7、然后这一步是输入主界面的名字，默认就可以了，点击完成。

       8、然后项目就创建完成了，项目的结构如下。

请教下，ADT-Bundle的eclipse中怎么修改编码格式？

          1.工作间编码更改，点击菜单“Window——>Preferences——>General——>Workspace”，默认GBK编码，选择UTF-8编码

        2.Android Project编码更改，点击需要更改的项目，鼠标右键“Properties——>Resource”查看当前Project编码，切换UTF-8

         3.当前类文件编码更改，在项目中使用了GBK，但是如果复制过来的类是UTF-8编码，需将UTF-8转换成GBK，才不至于出现乱码，使用EditPlus打开UTF-8的文件，“File——>Save as ——>Encoding——>Chinese Simplipied (GB)”，最后将文件复制到项目中