日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

默認(rèn)情況下，當(dāng)import組件時(shí)，對(duì)應(yīng)的CSS也會(huì)被加載，這容易造成樣式?jīng)_突，如下：

import MobileApp from './MobileApp'
import  DesktopApp from  './App'
//這里MobileApp,DesktopApp組件中的css都會(huì)被引入
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                {isMobile() ? <MobileApp /> : <DesktopApp />}
            </Suspense>
    </BrowserRouter>
   
);

如果想引入不同的組件時(shí)，才引入對(duì)應(yīng)的css, 可以如下操作

import React,{lazy,Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import isMobile from './funs/isMobile';

const MobileApp = lazy(() => import('./MobileApp'));
const DesktopApp = lazy(() => import('./App'));
//當(dāng)真正要渲染時(shí)，才加載import


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                {isMobile() ? <MobileApp /> : <DesktopApp />}
            </Suspense>
    </BrowserRouter>
   
);