京东快递小程序分包优化实践
共 6330字,需浏览 13分钟
·
2022-07-06 14:50
点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
前言—
随着项目规模增大,小程序分包优化是必须要面对的问题。分包不合理,不仅影响项目迭代和上线计划,还关乎用户体验,甚至因此导致 C 端用户流失。本文主要介绍京东快递小程序分包过程中踩过的坑,以及小程序分包优化的一些建议。
小程序简介
小程序是一种不需要下载安装即可在各类宿主环境(手机 APP、车载系统、IOT 设备等)中使用的应用程序。
小程序使用了双线程模型,包括逻辑层和渲染层:逻辑层 JSCore 负责运行 JavaScript 脚本,进行数据处理;渲染层使用 WebView 进行渲染,负责页面展示、处理用户交互。小程序通信模型如图 1 所示。
小程序分包机制
小程序的优势之一就是无需下载安装即可运行。在用户打开小程序时,如果是首次使用,或者小程序版本有更新,宿主环境会下载最新代码包,我们称这个包为小程序的“主包”。为优化小程序首次启动下载时间,各小程序平台对主包大小有一定限制,如微信限制主包大小不能超过 2M。
为了防止主包超限,以及更好地多人协作,开发人员可以对小程序进行分包,如将一组独立的功能页面作为分包打包,当用户进入分包页面时,宿主环境会动态下载对应分包,极大提高用户体验。小程序平台对分包大小限制为 20M。小程序包加载流程图如图 2 所示。
分包前准备—
本节主要介绍分包前的一些准备工作。
项目架构梳理
在分包优化前,首先对项目框架有个清晰地梳理,才能更好地明确优化方向。京东快递小程序基于 Taro 多端开发框架,适配了微信、百度、京东等多个 APP 渠道。
基础架构图如图 3 所示。
代码依赖分析
依赖分析能帮我们确定项目代码依赖关系,根据依赖关系可以确定分包优化的代码、资源文件等。依赖分析主要有以下两种方式:
通过小程序开发者工具的“代码依赖分析”插件,可以查看到各代码包的依赖情况。
在 Taro2.0 以上版本中,使用了 Webpack 进行编译构建。可以通过添加 webpack-bundle-analyzer 插件,实现依赖分析的可视化展示。主要步骤如下:
a. 首先安装 webpack-bundle-analyzer 依赖:
npm install webpack-bundle-analyzer -D
b. 然后在 mini.webpackChain 中添加如下配置:
const config = {
...
mini: {
webpackChain (chain, webpack) {
chain.plugin('analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
}
}
}
c. 然后通过运行编译命令,即可查看代码文件依赖关系及体积。
小程序打包面临问题—
随着需求迭代,京东快递小程序主包早已接近阈值 2M,稍有不慎就会超包,影响上线计划。
京东快递小程序打包面临问题如下:
图片资源过大,影响主包体积; 第三方包引入不规范,导致打包后引入冗余代码; console、debugger 等测试代码未做优化,需要上线前手动删除; 采用运行时而不是构建时进行多端小程序代码兼容; 分包难度大,主包涉及寄件、查件等黄金流程页面,分包成本大; 分包路径问题,有些页面路径已经给到外部,分包后涉及外部系统改造上线;
小程序分包优化实践—
本节主要介绍京东快递小程序分包优化实践。
图片资源问题
小程序主包的体积空间是“寸土寸金”的,建议将图片资源上传到 CDN,优先使用 CDN 图片。如有 tabbar 等必须用本地图片的情况,建议将本地图片压缩后再进行引入。图片资源压缩前后对比如图 4 所示:
可以看到,图片压缩后主包代码减少了 17KB,折算成代码行数收益是非常大的。分包优化时建议优先处理图片资源,图片压缩可以请 UI 同学协助处理。
第三方包引入问题
项目开发中难免会引入第三方工具包,包引入不当会导致打包后体积过大。拿 lodash 举例,原来的引入方式如下
import { get } from 'lodash'
上述引入打包结果如图 5 所示:
可以看到,lodash 包大小为 117KB。
我们优化后的引入方式如下:
import get from 'lodash/get'
import isEmpty from 'lodash/isEmpty'
打包结果如图 6 所示:
可以看到,优化引入方式后 lodash 包大小只有 46KB,使主包体积减少了 60%。
除了上述优化方法,还可以将 lodash 替换为“lodash-es”,“lodash-es”基于 ESM 打包方式,这样就能利用 tree-shaking 移除不必要的代码,同时还能保留了按需引入的写法。
关于 console、debugger 的打包优化
在原生开发中,项目中的 console、debugger 等调试代码占据了一定主包空间,往往需要上线前手动移除。京东快递小程序基于 Taro 框架开发,在编译构建时提供了代码压缩插件的支持,可以做如下优化配置:
module.exports = {
env: {
NODE_ENV: '"production"'
},
plugins: {
uglify: {
enable: true,
config: {
// 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
compress: {
drop_console: true,
drop_debugger: true
}
}
},
}
}
上述是生产环境打包配置文件,在 plugins 新增 uglify 选项,在 config 下新增 compress 配置项,将“drop_console”和“drop_debugger”设置为 true,即可在生产环境打包阶段移除代码中的 console 和 debugger,减少包代码体积。
采用构建时进行多端小程序代码兼容
京东快递小程序除了微信端,还适配百度和京东小程序。对于某些只在特定平台才有的功能,采用运行时的适配方法如下:
const isJD = process.env.TARO_ENV === 'jd'
function test() {
if (isJD) {
console.log('京东小程序特定功能')
}
}
首先定义了一个全局变量,在运行时判断如果是京东小程序平台,执行京东小程序相关代码。上述代码构建后的结果如下:
// 京东小程序
const isJD = true
function test() {
if (isJD) {
console.log('京东小程序特定功能')
}
}
// 非京东小程序
const isJD = false
function test() {
if (isJD) {
console.log('京东小程序特定功能')
}
}
可以看到,在京东和非京东小程序,只是顶级作用域中 isJD 的值不一样,test 函数中代码是没有变化的。优化后的代码如下
function test() {
if (process.env.TARO_ENV === 'jd') {
console.log('京东小程序特定功能')
}
}
构建后的结果
// 京东小程序
function test() {
console.log('京东小程序特定功能')
}
// 非京东小程序
function test() {}
可以看到,通过动态判断 process.env.TARO_ENV,构建后小程序只包含了自己平台相关的代码,大大减少了包体积(请注意区分 process.env.TARO_ENV 和 Taro.getEnv(),前者是编译构建时的变量,后者是运行时的变量)。
主包黄金流程页面分包、分包路径跳转问题
如果要对主包某个页面进行分包,但页面路径已提供给外部,分包改变路径后可能涉及其他系统改造上线。这种情况可以保留主包页面,代码做如下处理
export default class PageA extends Taro.Component<Props, State> {
componentDidMount() {
try {
const params = get(this.$router, 'params') || {}
const paramArr: Array<string> = []
Object.keys(params).forEach(key => {
params[key] && paramArr.push(`${key}=${params[key]}`)
})
let url = '/packageSub/test/test'
if (paramArr.length > 0) {
url = `${url}?${paramArr.join('&')}`
}
Taro.redirectTo({ url })
} catch (e) {}
}
render(): JSX.Element {
return <View></View>
}
}
可以看到,主包 PageA 页面只保留了 componentDidMount 的代码,首先从路由参数中获取 params,参数转换之后通过 redirectTo 路由到分包页面,这样对跳转方是无感知的,同时将 PageA 主体移入了分包页面,减小了主包体积。
总结—
小程序运行在各类宿主环境中,无需安装即可运行。因此保证小程序主包大小,对小程序进行分包优化能极大提升用户体验。
对小程序分包优化时,要具体情况具体分析。要注意以下几点:
分包优化前,要做好项目框架梳理工作,明确分包方向;然后利用代码依赖分析工具进行包依赖分析,确定要分包的代码、资源文件等;
优先处理图片资源加载、第三方包引入问题,然后进行正确打包配置,合理利用 process.env.TARO_ENV 进行平台差异处理,最后再考虑黄金流程页面分包;
分包优化是个持续的过程,要培养分包的意识,日常工作按照最佳实践进行开发,才能保证系统稳定。
往期推荐
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...