Biu-blog
Biu-blog copied to clipboard
CommanderXL
个人博客
# 类型操作符 ## & 操作符 交叉类型操作符。主要用于将多种类型合并为一个类型 ```javascript type TypeA = { ... } type TypeB = { ... } type TypeC = { ... } type A = TypeA &...
> 文章同步发表于 滴滴技术 公众号：[《小程序框架Mpx的下一代脚手架升级之路》](http://mp.weixin.qq.com/s?__biz=MzU1ODEzNjI2NA==&mid=2247558304&idx=1&sn=6a9a0afd65519221e7061098ab6b4964&chksm=fc288a07cb5f03118cfee7526eefc0fc04e9ed021849b6184aba222a2ca002a3e48120614d5c&scene=21#wechat_redirect) ## 背景 & 现状 `@mpxjs/[email protected]` 版本整体是基于模板配置的方式完成项目的初始化，整个的工作流是： 1. 下载一份存放于远端的 mpx 项目原始模板（mpx-template） 2. 根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件 完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构： ```javascript -- mpx-project |-- src // 项目源码 |-- config // 项目配置文件...
## webpack hmr ### webpack-dev-server 在使用 webpack-dev-server 的过程中，如果指定了 hot 配置的话（使用 inline mode 的前提下）， wds 会在内部更新 webpack 的相关配置，即将 HotModuleReplacementPlugin 加入到 webpack 的 plugins 当中。 ### HotModuleReplacementPlugin 在 HotModuleReplacementPlugin 执行的过程中主要是完成了以下几个工作： 1. 在创建...
## Vite ### HMR 基于 esm 规范实现的 hmr 不需要单独再去实现一套模块的系统，因此在整个流程当中比较重要的一个点就是如何去实现模块之间的依赖关系，hmr 的更新也是基于模块之间的依赖关系来进行工作的。 #### serverPluginHmr > src/node/server/serverPluginHmr.ts 1. 插件内部初始化一个 Websocket server； 2. `watcher.on('change')`绑定监听文件改动监听事件； ```javascript watcher.on('change', file => { if (!(file.endsWith('.vue') || isCssRequest(file))) {...
## Webpack loader 详解 ### loader 的配置 Webpack 对于一个 module 所使用的 loader 对开发者提供了2种使用方式： 1. webpack config 配置形式，形如： ```javascript // webpack.config.js module.exports = { ... module: { rules: [{ test: /.vue$/,...
每次调用 setData 方法都会完成一次从逻辑层 -> native bridge -> 视图层的通讯，并完成页面的更新。因此频繁的调用 setData 方法势必也会造成视图的多次渲染，用户的交互受阻。所以对于 setData 方法另外一个优化角度就是尽可能的减少 setData 的调用频次，将多个同步的 setData 操作合并到一次调用当中。接下来就来看下 mpx 在这方面是如何做优化的。 还是先来看一个简单的 demo: ```javascript import { createComponent } from '@mpxjs/core' createComponent({ data: {...
由于小程序的双线程的架构设计，逻辑层和视图层之间需要桥接 native bridge。如果要完成视图层的更新，那么逻辑层需要调用 setData 方法，数据经由 native bridge，再到渲染层，这个工程流程为： > 小程序逻辑层调用宿主环境的 setData 方法； > 逻辑层执行 JSON.stringify 将待传输数据转换成字符串并拼接到特定的JS脚本，并通过evaluateJavascript 执行脚本将数据传输到渲染层； > 渲染层接收到后， WebView JS 线程会对脚本进行编译，得到待更新数据后进入渲染队列等待 WebView 线程空闲时进行页面渲染； > WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在WXML片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到UI视图。同时，将新的节点树替换旧节点树，用于下一次重渲染。...
小程序也是通过数据去驱动视图的渲染，需要手动的调用`setData`去完成这样一个动作。同时小程序的视图层也提供了用户交互的响应事件系统，在 js 代码中可以去注册相关的事件回调并在回调中去更改相关数据的值。Mpx 使用 Mobx 作为响应式数据工具并引入到小程序当中，使得小程序也有一套完成的响应式的系统，让小程序的开发有了更好的体验。 还是从组件的角度开始分析 mpx 的整个响应式的系统。每次通过`createComponent`方法去创建一个新的组件，这个方法将原生的小程序创造组件的方法`Component`做了一层代理，例如在 attched 的生命周期钩子函数内部会注入一个 mixin： ```javascript // attached 生命周期钩子 mixin attached() { // 提供代理对象需要的api transformApiForProxy(this, currentInject) // 缓存options this.$rawOptions = rawOptions // 原始的，没有剔除...
不同于 Vue 借助 webpack 是将 Vue 单文件最终打包成单独的 js chunk 文件。而小程序的规范是每个页面/组件需要对应的 wxml/js/wxss/json 4个文件。因为 mpx 使用单文件的方式去组织代码，所以在编译环节所需要做的工作之一就是将 mpx 单文件当中不同 block 的内容拆解到对应文件类型当中。在动态入口编译的小节里面我们了解到 mpx 会分析每个 mpx 文件的引用依赖，从而去给这个文件创建一个 entry 依赖(SingleEntryPlugin)并加入到 webpack 的编译流程当中。我们还是继续看下 mpx loader 对于 mpx...
Wxs 是小程序自己推出的一套脚本语言。[官方文档](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html)给出的示例，wxs 模块必须要声明式的被 wxml 引用。和 js 在 jsCore 当中去运行不同的是 wxs 是在渲染线程当中去运行的。因此 wxs 的执行便少了一次从 jsCore 执行的线程和渲染线程的通讯，从这个角度来说是对代码执行效率和性能上的比较大的一个优化手段。 有关官方提到的有关 wxs 的运行效率的问题还有待论证： > “在 android 设备中，小程序里的 wxs 与 js 运行效率无差异，而在 ios 设备中，小程序里的 wxs 会比...