关于 import ('xxx') 引发的血案

大家都知道，es6模块引入方式为import 'xxx'; 当我们加上一些判断条件时候，我们会使用 if(true) {import('xxx')}来动态引入一些模块；
我的使用场景当中，因为本地mock了数据，是需要判断开发环境才引入mock，生产则不走mock数据 index.tsx长这样

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';

process.env.NODE_ENV === 'development' &&
  process.env.REACT_APP_MOCK === 'true' &&
  import('./mock');

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
debugger;
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
);

app.tsx长这样

import React, { useEffect } from 'react';
import routes from './routes';
import { useRoutes, useNavigate } from 'react-router-dom';
import Login from '@/pages/login';
import { userAuth } from '@/utils';
import { message } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import './App.less';

function App() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const elem = useRoutes(routes);
  useEffect(() => {
    if (!userAuth.isLogined) {
      message.warn('请登录');
      navigate('/login');
    } else {
      debugger;
      dispatch(getUSerInfo()); // 获取用户信息（包括角色信息以及权限信息）
    }
  }, [userAuth.isLogined]);

  return <div className='App'>{userAuth.isLogined ? elem : <Login />}</div>;
}

export default App;

mock/index.tsx这样

...省略一万行
debugger
...省略一万行

我们通过几个断点执行顺序为：1.index.tsx -> 2.app.tsx -> 3. mock/index.jsx 这就直接导致getUserInfo无法走mock数据，走的正式的接口，mock失效

经验丰富的老司机一眼就看出来这是事件循环机制惹的祸，由于本司机开始没有发现import('')这样特殊的语法，我也纠结了很长时间，在“最后凌晨四点”发现了差异。遂改成了同步 commonjs require('')的方式，那本文就循环机制，import,require的差别做一个详细的探究。。 直接贴链接： juejin.cn/post/699880…
juejin.cn/post/684490…