245 - 《按需加载 PC 和 Mobile 资源》

先说下背景。上周在给蚂蚁招聘官网做优化，调研时发现，由于招聘官网同时有 pc 和 mobile 的访问需求，所以会需要用到 antd 和 antd-mobile，而存在的问题是，antd 和 antd-mobile 会被打包在一起。这意味着，不管你是用 pc 还是 mobile 访问，都会给你 antd + antd-mobile。这肯定不是期望的，期望的是 pc 访问时给 antd，mobile 访问时给 antd-mobile。

怎么做呢？我先为了下「Umi Contributor」群里的同学，得到如下答案：

1、hooks + suspense + throw promise
2、umd proxy
3、await import() + splitChunks
4、index.pc.ts + index.mobile.ts，打包两套产物

然后找团队同学实践了下，得到的方案是「React.lazy + isMobile + await Import()」，代码见 https://github.com/sorrycc/pc-mobile-example/tree/master/lazy-isMobile-awaitImport 。

先定义一个兼容用的 Button 组件，基于 isMobile 判断，决定装载 antd 还是 antd-mobile。

import React from 'react';

let Button;
const isMobile =
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent,
  );
if (isMobile) {
  Button = React.lazy(async () => {
    const antdMobile = await import/* webpackChunkName: "antd-mobile" */('antd-mobile');
    return { defa