Biu-blog
Biu-blog copied to clipboard
CommanderXL
个人博客
Render Function 这块的内容我觉得是 Mpx 设计上的一大亮点内容。Mpx 引入 Render Function 主要解决的问题是性能优化方向相关的，因为小程序的架构设计，逻辑层和渲染层是2个独立的。 这里直接引用 Mpx 有关 Render Function 对于性能优化相关开发工作的描述： > 作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个： > * 尽可能减少setData调用的频次 > * 尽可能减少单次setData传输的数据 > 为了实现以上两个优化方向，我们做了以下几项工作： > 将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次； > 将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。 接下来我们看下...
不同于 web 规范，我们都知道小程序每个 page/component 需要被最终在 webview 上渲染出来的内容是需要包含这几个独立的文件的：js/json/wxml/wxss。为了提升小程序的开发体验，mpx 参考 vue 的 SFC(single file component)的设计思路，采用单文件的代码组织方式进行开发。既然采用这种方式去组织代码的话，那么模板、逻辑代码、json配置文件、style样式等都放到了同一个文件当中。那么 mpx 需要做的一个工作就是如何将 SFC 在代码编译后拆分为 js/json/wxml/wxss 以满足小程序技术规范。熟悉 vue 生态的同学都知道，vue-loader 里面就做了这样一个编译转化工作。具体有关 vue-loader 的工作流程可以参见我写的[文章](https://github.com/CommanderXL/Biu-blog/issues/33)。 这里会遇到这样一个问题，就是在 vue 当中，如果你要引入一个页面/组件的话，直接通过`import`语法去引入对应的 vue 文件即可。但是在小程序的标准规范里面，它有自己一套组件系统，即如果你在某个页面/组件里面想要使用另外一个组件，那么需要在你的 json...
## Ruleset loader过滤器 Ruleset 类主要作用于过滤加载 module 时符合匹配条件规则的 loader。Ruleset 在内部会有一个默认的 module.defaultRules 配置，在真正加载 module 之前会和你在 webpack config 配置文件当中的自定义 module.rules 进行合并，然后转化成对应的匹配过滤器。 webpack 文档上对于 Ruleset 的说明太过于抽象，在文档上提到的条件，结果和嵌套规则并没有做很好的说明。本文会结合示例，源码来解释下这3点具体是指哪些内容。 首先我们来看下 module.defaultRules 配置是在 `WebpackOptionsDefaulter.js` 当中完成的，得到的结果是： ```javascript [ {...
工欲善其事必先利其器，在你开始了解 webpack 源码以前，首先需要了解下如果对 webpack 源码进行调试。因为笔者日常使用的是 VScode 作为我的编辑器，所以在这里我也是介绍下通过 VScode 来进行 webpack 的源码，或者是对 webpack 相关的 loader、plugin 进行调试。 我们的调试都是在 node 环境下进行的，不涉及到 browser，而 VScode 内部已经集成了 node debugger 环境，因此我们不需要安装其他的插件，直接进入到 debugger 配置阶段。 1. 打开 Activity Bar...
在我们使用 webpack 作为我们的构建工具来进行日常的业务开发过程中，我们可以借助 babel 这样的代码编译转化工具来使用 js 新版本所实现的特性，其中 ES Module 模块标准是 ES6 当中实现的，在一些低版本的浏览器当中肯定是没法直接使用 ES Module 的。所以我们需要借助 webpack 来完成相关的模块加载、执行等相关的工作，使得我们在源码当中写的遵照 ES Module 规范的代码能在低版本的浏览器当中运行。这篇文章主要就是来介绍下 webpack 自身为了达到这样一个目的从而实现的自己的一套模块系统。 我们首先来看个简单的例子： ```javascript // a.js import { add }...
## dependencyTemplates 依赖模板 webpack 对于不同依赖模块的模板处理都有单独的依赖模块类型文件来进行处理。例如，在你写的源代码当中，使用的是ES Module，那么最终会由 HarmonyModulesPlugin 里面使用的依赖进行处理，再例如你写的源码中模块使用的是符合 CommonJS Module 规范，那么最终会有 CommonJsPlugin 里面使用的依赖进行处理。除此外，webpack 还对于其他类型的模块依赖语法也做了处理： * AMD -> AMDPlugin * System -> SystemPlugin * Require.ensure -> RequireEnsurePlugin * Import (分包异步加载 module)...
声明文件即存放你声明的地方，声明包括命名空间、类型及值这三类。 在我们使用TS进行项目开发的时候会定义各种类型、变量、函数、对象等内容。这些内容有可能仅仅是作为项目内部来用，但是当你的项目是作为其他TS项目的依赖来使用的话，其他项目需要引用你的项目并调用相关模块或者方法进行开发。但是这些项目却不能很好的利用你内部的类型来做类型检查，所以你需要做的一项工作就是将相关的类型、变量、函数等给暴露出来，让其他项目在编译TS代码的时候，使用相关的类型去更好的做类型检查。简单点理解就是别人的TS项目在使用你所提供的TS项目时，别人的项目如果想做类型检查，那么就需要在你的项目当中通过声明文件将相关类型暴露出去。这就是声明文件最终的作用。 声明文件以`.d.ts`的后缀结尾。 ### 全局声明 vs 模块声明 如果某个文件遵循 ES Module/CommonJS/AMD 等模块书写规范的声明文件即为模块声明。如果这个文件没有出现相关模块规范的书写形式，而是仅仅有顶级的声明语句，那么这个文件即为全局声明文件。 全局声明文件里面的声明可以在其他任意的TS文件当中进行使用，而不用单独的导入。而模块声明如果需要被其他模块文件使用的话就需要进行相关的导入操作了。 ### TS编译器寻找声明文件路径 当你使用 npm 包的形式去引入模块。 ```javascript import foo from 'foo' ``` * `node_modules/@types/foo` * `node_modules/foo/index.d.ts` * `node_modules/foo/package.json` 当中定义的`typing`或者`types`2个字段中的一个...
## Webpack Loader 详解 前2篇文章主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loader。 这里我们来看下 [vue-loader(v15)](https://vue-loader.vuejs.org/zh/#vue-loader-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F) 内部的相关内容，这里会讲解下有关 vue-loader 的大致处理流程，不会深入特别细节的地方。 ```shell git clone [email protected]:vuejs/vue-loader.git ``` 我们使用 vue-loader 官方仓库当中的 example 目录的内容作为整篇文章的示例。 首先我们都知道 vue-loader 配合 webpack 给我们开发 Vue 应用提供了非常大的便利性，允许我们在...
## Webpack Loader 详解 上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程：  在 module 一开始构建的过程中，首先会创建一个 loaderContext 对象，它和这个 module 是一一对应的关系，而这个 module 所使用的所有 loaders 都会共享这个 loaderContext 对象，每个 loader 执行的时候上下文就是这个 loaderContext...
记录下`webpack-dev-server`的用法. 首先，我们来看看基本的`webpack.config.js`的写法 ```javascript module.exports = { entry: './src/js/index.js', output: { path: './dist/js', filename: 'bundle.js' } } ``` 配置文件提供一个入口和一个出口，`webpack`根据这个来进行`js的打包和编译`工作。虽然`webpack`提供了`webpack --watch`的命令来动态监听文件的改变并实时打包，输出新`bundle.js`文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到`hot replace`，即每次`webpack`编译之后，你还需要手动刷新浏览器。 `webpack-dev-server`其中部分功能就能克服上面的2个问题。`webpack-dev-server`主要是启动了一个使用`express`的`Http服务器`。它的作用**主要是用来伺服资源文件**。此外这个`Http服务器`和`client`使用了`websocket`通讯协议，原始文件作出改动后，`webpack-dev-server`会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即上面配置的: ```javascript output: { path: './dist/js', filename: 'bundle.js' } ```...