Блог

Главная - Вопросы по программированию - NextJS / Ant-стили проектирования и пакеты JS, отложенные для загрузки в промежуточном режиме

NextJS / Ant-стили проектирования и пакеты JS, отложенные для загрузки в промежуточном режиме

#reactjs #typescript #next.js #antd

#reactjs #typescript #next.js #antd

Вопрос:

Привет, прекрасные люди,

Мне нужна помощь с моим приложением NextJS и Ant-design. Настоящая проблема возникает только в stagging amp; production среде, я не могу воспроизвести ее локально, ни запустив:

  • npm run dev
  • ни npm run build and npm run start

Вот промежуточная ссылка, проблема возникает только при первой загрузке страницы и при выполнении жесткого обновления.

ПРОБЛЕМА

У меня есть LayoutWrapper компонент, который отображает панель навигации, основное содержимое и нижний колонтитул. В приведенном ниже коде я использую useBreakpoint() хук из ant-design для быстрого реагирования панели навигации. Но в первый раз, когда он отображает всю страницу целиком, как на мобильном устройстве, затем через несколько секунд страница возвращается к настольной версии. Та же проблема возникает после жесткого обновления браузера.

Я понял, что некоторым пакетам CSS и JS требуется время для загрузки. Что приводит к такому поведению.

Компонент макета выглядит следующим образом:

 const LayoutWrapper: React.FC<Props> = ({
  baseUrl,
  title,
  image,
  description,
  isHome = false,
  isError = false,
  isCause = false,
  isCategory = false,
  isCreate = false,
  noFooter = false,
  isForm = false,
  children,
}) => {
  const { svpProps } = React.useContext(Context);
  const router = useRouter();
  const screens = useBreakpoint();

  const [scrolled, setScrolled] = React.useState("");
  const user = useSelector((state: IRootState) => state.user);

  const dispatch = useDispatch();

  const scrollHandler = () => {
    setScrolled(
      window.pageYOffset > 640
        ? "over"
        : window.pageYOffset > 80
        ? "scrolled"
        : "",
    );
  };

  React.useEffect(() => {
    window.addEventListener("scroll", scrollHandler);
  }, [scrollHandler]);

  React.useEffect(() => {
    if (user.currentUser.isLoggedin amp;amp; _.isEmpty(user.currentUser.data)) {
      getCurrentUser(dispatch);
    }
  }, [dispatch]);

  const _url = `${getPlatformUrl()}${router.asPath}`;
  const _description = description || "More Than A Crowdfunding Platform";
  const _siteName = "Save Plus";
  const _author = "Exuus";
  const _image = image || `${getPlatformUrl()}/images/get-started.png`;
  const _title = title || "";
  const _twitterHandle = "@SavePlusHQ";

  return (
    <Layout className={styles.layout}>
      <Head>
        {svpProps.error || user.currentUser.error.message ? (
          <title>Error | {_siteName}</title>
        ) : (
          <title>
            {title ? `${_title} | ` : ""}
            {_siteName}
          </title>
        )}
        <link
          href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700amp;display=swap"
          rel="stylesheet"
        />
        <link rel="canonical" href={_url} />
        <meta name="description" content={_description} />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content={_siteName} />
        <meta property="og:title" content={_title} />
        <meta property="og:image" content={_image} />
        <meta property="og:description" content={_description} />
        <meta property="og:url" content={_url} />
        {!isCause amp;amp; <meta name="twitter:site" content={_twitterHandle} />}
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:title" content={_title} />
        <meta name="twitter:description" content={_description} />
        <meta name="twitter:image" content={_image} />
        <meta name="author" content={_author} />
        <link
          id="favicon"
          rel="shortcut icon"
          href="/icons/favicon-32x32.png"
          sizes="16x16 32x32 48x48"
          type="image/png"
        />
      </Head>
      {screens.lg ? (
        <Header
          scrolled={scrolled}
          isCategory={isCategory}
          user={user}
          isHome={isHome}
          isCreate={isCreate}
          svpProps={svpProps}
          baseUrl={baseUrl}
        />
      ) : (
        <MobileHeader
          scrolled={scrolled}
          isCategory={isCategory}
          user={user}
          isHome={isHome}
          isCreate={isCreate}
          svpProps={svpProps}
          baseUrl={baseUrl}
        />
      )}
      {svpProps.error || user.currentUser.error.message ? (
        <Content className={styles.layout__content} data-is-form="true">
          <Result
            status="500"
            title="Oooops!"
            subTitle={
              <>
                Sorry, something went wrong.
                <br />
                {svpProps.error || user.currentUser.error.message}
              </>
            }
            extra={
              <>
                <Button
                  type="primary"
                  onClick={() => router.push("/")}
                  icon={<HomeOutlined />}
                />
                <Button onClick={() => router.reload()}>RELOAD</Button>
              </>
            }
          />
        </Content>
      ) : (
        <Content
          className={styles.layout__content}
          data-is-category={isCategory}
          data-is-form={isForm}
          data-is-error={isError}
        >
          {children}
        </Content>
      )}
      {!noFooter amp;amp; (
        <Footer className={styles.layout__footer}>
          <FooterItem />
        </Footer>
      )}
    </Layout>
  );
};

export default LayoutWrapper;

Мой __app.js файл выглядит следующим образом:

 import React from "react";

import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { Router } from "next/router";
import { withRedux } from "helpers/with-redux-store";
import getInitialProps from "helpers/getInitialProps";
import Context from "helpers/context";
import "react-image-crop/dist/ReactCrop.css";

import "theme/index.css";
import "theme/global.scss";
import "styles/global.scss";

Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => {
  window.scroll({
    top: 0,
    left: 0,
  });
  NProgress.done();
});
Router.events.on("routeChangeError", () => NProgress.done());

const MyApp = ({ Component, pageProps, svpProps }) => {
  return (
    <Context.Provider value={{ svpProps }}>
      <Component {...pageProps} svpProps={svpProps} />
    </Context.Provider>
  );
};

MyApp.getInitialProps = getInitialProps;

export default withRedux(MyApp);

Вот как я загружаю стили дизайна ant, используя МЕНЬШЕ

 @import '../../node_modules/antd/lib/style/themes/default.less';
@import '../../node_modules/antd/dist/antd.less';
@import './theme.less';

И у меня есть скрипт, который компилирует тему LESS в CSS
"build-css": "less-watch-compiler --run-once --enable-js --main-file=index.less theme/less/ theme/",

Результирующая тема / index.css включена в мой __app.js , как показано в приведенном выше фрагменте

Я осознал эту проблему, поскольку мои товарищи по команде начали использовать этот скрипт для развертывания приложения

sudo git pull origin develop amp;amp; sudo yarn install amp;amp; sudo yarn build amp;amp; sudo pm2 restart all"

Я действительно не имею ни малейшего представления о том, как я могу исправить эту странную ошибку, поскольку это не происходит локально

Ответ №1:

просто попробуйте заменить его на react-responsive

 export const useResponsive = () => {
  const xxl = useMediaQuery({
    query: "(min-width: 1600px)",
  });
  const xl = useMediaQuery({
    query: "(min-width: 1200px)",
  });
  const lg = useMediaQuery({
    query: "(min-width: 992px)",
  });
  const md = useMediaQuery({
    query: "(min-width: 768px)",
  });
  const sm = useMediaQuery({
    query: "(min-width: 576px)",
  });
  const xs = useMediaQuery({
    query: "(max-width: 576px)",
  });
  return { xxl, xl, lg, md, sm, xs };
};

этот хук решит вашу проблему

Комментарии:

1. Хорошо @Ahmed. Я собираюсь попробовать это решение