微信小程序主包体积优化：剔除ES5兼容代码与样式分包异步加载探索

随着古茗点单小程序的持续迭代，主包体积不断膨胀， 面临主包容量不足的问题。本文将分享我们如何通过剔除ES5兼容代码和探索样式分包异步加载来优化主包体积。

在上一次主包体积优化中，我们通过动态import配合splitChunks，将React组件的JavaScript逻辑拆分并编译到分包中，有效降低了主包的JS体积。然而由于微信小程序缺乏样式层面的异步加载机制，异步组件所依赖的样式文件仍需要在主包的app.wxss中统一引入。

具体来说我们面临两个主要问题：一是主包体积仍然较大，二是样式文件无法异步加载导致首屏渲染时可Neng出现短暂的“无样式DOM”闪烁。

随着移动设备硬件性Neng的提升和微信版本的不断升级，用户设备对ES6及以上语法的支持度Yi显著提高。因此，大量为兼容ES5而引入的降级与垫片代码逐渐失去必要性，反而成为包体体积的负担。

微信官方提供了miniprogram-compat，用于将基础库Neng力转换为Browserslist配置。通过确定Zui低支持的基础库版本，并生成对应的Browserslist配置，我们Ke以在构建阶段精准剔除ES5兼容代码。

import { getBrowsersList } from 'miniprogram-compat';
import type { IPluginContext } from '@tarojs/service';
interface Opt {
  minBaseLibraryVersion: string;
}
export default  => {
  ctx.onBuildStart => {
    if  return;
    const browsersList = getBrowsersList;
    if  return;
    process.env.BROWSERSLIST = browsersList?.join;
    console.log;
  });
};

由于微信小程序本身缺乏样式层面的异步加载机制，我们尝试通过自定义组件来实现样式的分包异步加载。

我们 尝试在分包页面中加载样式，希望Neng影响主包页面的样式，但实际测试发现这条路并不通。

随后我们探索了通过跨分包自定义组件引用，将样式放进分包组件里随着组件的加载一起生效，从而实现样式的分包异步加载。

增强lazy：react-lazy-enhanced

Suspense的fallback状态

import React, { 
  ComponentPropsWithoutRef, 
  ComponentRef, 
  ComponentType, 
  ForwardRefExoticComponent, 
  useEffect,
} from 'react';
enum Status {
  Uninitialized = 'uninitialized',
  Pending = 'pending',
  Resolved = 'resolved',
  Rejected = 'rejected',
}
interface Result {
  default: T;
}
interface LoadData {
  status: Status;
  result?: T | Error;
  promise?: Promise;
}
type Factory =  => Promise;
export const lazy =  => {
   // ...
};

Suspense.loaded通知runtime.js

import path from 'path';
import { Compiler, Compilation } from 'webpack';
import { AsyncPackOpts } from './types';
export const PLUGIN_NAME = 'InjectStyleComponent';
export const InjectStyleComponentName = 'inject-style';
const injectStyleComponentCode = `
const { SingletonPromise } = require
Component({
  properties: {
    route: String,
  },
  lifetimes: {
    attached: function  {
      return SingletonPromise.loaded
    },
    detached: function  {
      return SingletonPromise.unloaded
    }
  }
})
`;
type Opt = AsyncPackOpts;
export class InjectStyleComponentPlugin {
   // ...
}

通过剔除ES5兼容代码，我们成功优化了小程序主包体积；但在样式分包的异步加载Neng力上，仍然无法Zuo到真正完善。尽管我们的方案在实际应用中仍存在一些问题，如页面短暂闪一下“没样式的DOM”，但我们相信随着技术的不断进步和微信小程序Neng力的增强，这些问题终将得到解决。

未来我们期待微信官方Neng提供geng完善的异步样式加载API，使样式的加载、注入与生效具备可观测、可编排的生命周期，从而彻底解决样式分包异步加载的问题。

作者：潘宇