inflearn logo
강의

講義

知識共有

フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 1

1-10) テキスト圧縮の適用

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

解決済みの質問

583

wjdwjdtn926155

投稿した質問数 1

1

안녕하세요,
강의와 같이 lazy를 적용하였는데, 페이지 이동 후 네트워크 탭에서 새로 받는 청크파일이 표시되지 않는데 따로 설정이 필요한걸까요?

코드

import React, { Suspense, lazy } from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';

const ListPage = lazy(() => import('./pages/ListPage/index'));
const ViewPage = lazy(() => import('./pages/ViewPage/index'));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;

 

네트워크 탭(전체로 선택하여 확인)

 

실행 환경

react chrome-devtools

回答 1

0

hackurity01

안녕하세요 정수님

혹시 지연 로딩을 적용 후, 페이지를 이동해보셨나요?

지연로딩은 필요할 때 로드하기 때문에 navigate를 콜하여 페이지가 이동되는 순간 로드가 됩니다.

답변이 도움되셨기를 바라며 강의에 관심을 가져주셔서 감사합니다. :)

1

wjdwjdtn926155

확인해보니, 저의 실수로 네워크탭에 검색필터가 생겨 보이지 않는 현상이었습니다

답변해주셔서 감사드립니다!

bundle analyzer 에 대한 질문이 있습니다.

0

108

2

Cannot find module serve 에러

1

104

1

성능 탭에서 소요시간이 안보입니다

0

205

2

이미지 CDN 만드는 방법

0

459

1

Performance FPS 탭이 안보여요.

1

798

1

CPU throttling이 뭔가요?

0

1119

1

default export가 아닌 named export일 때 lazy사용법

1

1070

1

network 캐싱에 대해서 질문 있습니다!

1

427

1

vue project에서 chrome performance tab 확인하기

1

458

1

node version으로 인한 오류

4

1232

1

강의 자막

1

956

2

번들파일과 병목현상 질문

2

396

1

webpack-bundle-analyzer 질문

1

786

1

이미지 프리로딩 질문

1

385

1

이미지 최적화 활용

1

582

1

강력 새로고침

1

323

1

Suspense 관련해서 질문드립니다

2

360

1

config-overrides cant resolve path

1

362

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

611

1

custom react 환경에서 node_modules chunk 분리

1

381

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

283

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

367

2

텍스트 압축 방식에 대해 질문이 있습니다

2

952

1

최적화에 대해서 질문있습니다~~

1

344

1