uni-app支付宝分包预加载配置不生效问题

前言

这是很早之前碰到的问题，刚开始使用uniapp开发打包到支付宝平台的时候遇到的，最近在整理优化代码的时候想起来，为了避免以后忘记，特此记录一下，同时希望也可以帮到遇到同样问题的小伙伴

发现问题

为了提高小程序启动速度，我们在项目中使用了大量的分包，主包只放置了一小部分页面。但是分包也会有一些弊端，这里就不再过描述了，感兴趣的自行去官网查验，大概就是分包是在访问页面时才会去下载内容，所以会有一些卡顿，分包预加载就是为了解决这个问题而出现的。

我们在某些即将要打开分包的页面中配置的分包预加载，但是在支付宝小程序的实际体验中，发现还是会出现卡顿延长的现象，仿佛没有配置预加载一样，后面通过去看打包后的源码发现，配置中并没有预加载这一项，打包后不生效。

//page.json 已经配置了preloadRule
...其他配置
"preloadRule": {
		"pages/index/index": {
			"network": "all",
			"packages": [
				"pages/dispatch/",
				"pages/priceCheck/",
				"pages/prizedraw/",
				"pages/mynulist/",
				"pages/disextend"
			]
		},
}
...

//unpackage\dist\build\mp-alipay\app.json
//并没有preloadRule这一对象，说明打包不生效
{
    "pages":"pages/index/index"
    ...其他配置
}

解决问题

那段时间刚好在自学node,所以刚好这个问题可以拿来练手，也非常简单，既然打包不生效，那我就在打包结束后手动把配置写进去不就好了，所以思路很简单：

• 获取page.json的preloadRule

• 获取unpackage/build/mp-alipay/app.json的内容，判断是否有preloadRule

• 如果没有，则把步骤一中获取的内容写进app.json中去

很简单吧，其中只会用到node中的path和fs模块,然后照着webpack官网中plugin的教程写一个插件，监听done生命周期并触发就可以

看一下代码就能明白

// vue.config.js
function AlipayPreloadRulePlugin() {}

AlipayPreloadRulePlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function() {
    readFile(path.join(__dirname, 'pages.json')).then(data => {
      const pageData = JSON.parse(data.toString().replace(/\/*.*?\*\//g, ''))
      if (pageData.preloadRule) {
        const appConfigPath = path.join(__dirname, 'unpackage/dist/', process.env.NODE_ENV === 'production' ? 'build' : 'dev', platform, 'app.json')
        readFile(appConfigPath).then(config => {
          config = JSON.parse(config.toString().replace(/\/*.*?\*\//g, ''))
          if (!config.preloadRule) {
            config.preloadRule = pageData.preloadRule
            writeFile(appConfigPath, JSON.stringify(config, null, 2)).then(() => {
              console.info('支付宝预加载配置创建成功了')
            })
          }
        })
      }
    }).catch((err) => {
      console.error('支付宝生成分包预加载配置出错了:', err.toString())
    })
  })
}

总结

简单来说就是**获取配置 -> 写入配置 **

完事~