|
@插件开发者 体积优化全攻略请查收！-绍兴网络公司为你呈现时间：2023-08-02 凭借即插即用、开发共享等优势，小程序插件 成为企业能力或服务重要载体之一。插件开发者通过插件快速共享重要能力，不断繁荣小程序开发者生态。 然而插件体积是开发者重点关注的方向之一。过大的插件体积影响到小程序代码包体积，进而影响到插件的应用范围。 现在开发者可以通过优化 DOM、WXSS、编译与压缩等方式实现插件体积的最优解，快来看看如何应用吧！ 简化 DOM 在小程序双线程模型中，DOM 只存在于渲染层，主要用于动态访问程序和脚本。简化 DOM 的结构、资源调用等方式能够较大程度上减少插件体积。 1、恰当使用后台资源 在不影响用户体验的前提下，开发者可以尽量使用后台资源，减少体积压力。例如纯静态文本类的内容可以使用后台返回方式。 2、减少不必要的嵌套 开发者可以简化代码结构，减少不必要的代码嵌套，编写方式更优雅，体积压力更小。 3、灵活使用原生组件 开发者根据实际情况灵活使用原生组件，避免不必要的样式重置和覆盖。例如以下代码示例对于原生按钮组件的合理应用能够减少 DOM 的体积压力。 4、精简逻辑判断字段 简化逻辑判断字段能够减少代码编写量，降低动态调用的压力。 简化 WXSS 作为全局的样式文件，WXSS 文件管理多个页面的样式。简化 WXSS 的内容能够有效降低插件体积。 1、简化命名 命名尽量简洁并且语义化，减少冗余和避免复杂的命名方式，命名长度控制在 3 层内。 2、简写属性与属性值 开发者尽可能简写 WXSS 的属性与属性值，例如 background、animation 等。 3、减少不必要的兼容前缀 对于不必要的 WXSS 兼容前缀，例如 flex 布局、transform 等，开发者可以视乎实际情况减少使用。 4、提取公用的 reset 样式 对于需要多处、反复重置的样式，例如 box-size 属性，开发者可以直接提取公用的 reset 样式，减少多处使用的情况。 5、精简代码 对优化 WXSS 而言，精简代码很重要，例如相同的代码使用复用类名或者合并样式来避免重复代码。 按需编译与压缩 在编译环节，开发者可以通过配置 config.js，根据不同的打包命令进行按需编译，自动打包需要的文件和剔除不需要的文件。 除此以外，开发者可以尝试对不同格式文件进行插件代码压缩。例如在微信开发者工具直接压缩 JS 文件，借助自动化构建工具的文件压缩插件进行 WXML、WXSS、JSON 等 3 项文件的压缩，实现插件体积优化。 除了对 DOM、WXSS、编译与压缩的优化，插件体积优化还可以从 image、animation、component 等方面进行更多细节优化。结合多种方式，插件体积能够实现 30% 的优化，减少到 100K 以内。 凭借着丰富的能力、便捷的应用方式，插件正在不断赋能小程序生态。想要了解插件开发的更多详情？点击 接入指南 即可了解。 如有其他小程序插件相关的问题，可在 微信开放社区 发帖互动，技术专员将为大家解答及进行深度交流。 原创 ｜ 腾讯 UI 开发工程师 lauheeliu
|
