Long story short - nobody cares about version 1 and 2 - by that time the library, I am going to talk about, even had a different name. Version 3 never existed and the difference between 4 and 5 was a forwardRef, or React 16 support, which is a good reason for a breaking change. So, in short, v6 is actually 3rd iteration on the API.

그만, 그만, 왜 게으르지 않아?

티카시 / react 가져온 구성 요소

✂️📦번들 프로그램과 무관한 SSR 친선 코드 분할 솔루션

가져온 구성 요소✂

코드 버스트는 항상 유효합니다*

^* It's really will never let you down. All credits to your bundler.

Read more about what this table displays

가져온 연결 사용

// a STATIC table with imports
const languages = {
  'en': () => import('./i18n/en'), // it's probably a json...
  'de': () => import('./i18n/de'),
}
// just a helper function
const pickLanguage = (lng) => languages[lng];
// your component
const MyI18nProvider = ({lng, children}) => {
  // let's pick and provide correct import function for our language
  const {
   imported: messages = {} // defaulting to empty object
  } = useImported(pickLanguage(lng));

  // set messages to the Provider
  return <I18nProvider value={messages}>{children}</I18nProvider>
}

importedModule 및 importedModule

import {importedModule, ImportedModule} from 'react-imported-component';

// you can use it to codesplit and  use `momentjs`, no offence :)
const Moment = importedModule(() => import('moment'));

<Moment fallback="long time ago">
  {(momentjs /* default imports are auto-imported*/) => momentjs(date).fromNow()}
</Moment>

// or, again, translations

<ImportedModule
 import={() => import('./i18n/en')}
 // fallback="..." // will throw to the Suspense boundary without fallback provided
>
 {(messages) => <I18nProvider value={messages}>{children}</I18nProvider> }
</ImportedModule>

가져오기와 게으름

const Component = importedComponent( () => import('./Component'), {
  LoadingComponent: Spinner, // what to display during the loading
  ErrorComponent: FatalError // what to display in case of error
});

Component.preload(); // force preload

// render it
<Component... />

별것

React 응용 프로그램 지원 만들기

import {imported} from "react-imported-component/macro";
imported(()=>import('./aGoodDay'));

번들 독립성

비즈니스 프로세스 로드 중

import "../async-requires";
import {injectLoadableTracker} from "react-imported-component/boot";
// ^ just 1kb

// injects runtime
injectLoadableTracker('importedMarks');


// give browser a tick to kick off script loading
Promise.resolve().then(() =>
  Promise.resolve().then(() => { 
    // the rest of your application
    // imported with a little "pause"
    require('./main')
  })
);

은 약속에서 main을 요구합니다. 상기와 같습니다.

은 약속에서 main이 필요하지 않습니다. 상기와 같이 (catch으로 이동할 뿐, 모든 코드는 여전히 묶여 있습니다)

깊이 있는 패키지 통합

티카시 / 패키지 가져오기

📝통계 패키지 플러그인 및💩웹팩flushchunks가 아이를 낳았어요!

패키지 가져오기

📝 stats-webpack-plugin and 💩webpack-flush-chunks had a baby!

서버 측 API

패키지 플러그인

const {ImportedPlugin} = require('webpack-imported')
module.exports = {
  plugins: [
    new ImportedPlugin('imported.json')
  ]
};

This will output imported.json as a one of the emitted assets, with all the information carefully sorted.

Stat.json

If you have only stat.json generated somehow you can convert into into "imported" format

import {importStats} from "webpack-imported"
import stats from 'build/stats.json'
const importedStat = importStats(stats);

SSR API

• importedAssets(stats, chunks, [tracker]) - return all assets associated with provided chunks. Could be provided a tracker to prevent duplications between runs.
• createImportedTracker() - creates a duplication prevention tracker

import {importedAssets} from "webpack-imported"
import importedStat from "build/imported.json"; 

A webpack plugin to gather the data, and clientside API, including React binding, to handle everything out of the box.

import importedData from 'build/imported.json';

<WebpackImport
   stats={importedData}
   chunks={getMarkedChunks(marks)}
   publicPath={importedData.config.publicPath}
   crossOrigin={CDN_ANONYMOUS}
/>

CSS

CSS도 가장 좋은 방식으로 처리된다. 일반적인 CSS 파일에 있어서 관건적인 스타일 추출은 상자를 열면 바로 사용할 수 있다.

티카시 / 사용 스타일

📝페이지를 보여주는 데 사용되는 모든 관건적인 스타일입니다.

사용 스타일

렌더링 페이지에 사용할 모든 스타일 가져오기

Bundler and framework independent CSS part of SSR-friendly code splitting

주어진 HTML 및/또는 인라인 키 스타일에서 사용된 css개의 파일 감지
동기화 또는 흐름 렌더링을 지원합니다.

코드 분할

이것은 React가 이 라이브러리와 무관하더라도 코드 분할, 서버 쪽 렌더링, React에 관한 것입니다.
코드 분할은 좋은 특성이고 SSR도 좋지만 당신은
페이지를 활성화하기 전에 사용하는 모든 scripts을 클라이언트에 로드합니다.
모두가 이야기하고 있는 것은 .css이 아니라 .js이다.
이것은 다른 방식으로 완성된 것이다.이것은 큰 임무가 아니다. 코드로 블록을 분할하기만 하면
추적할 수 있습니다. - 사용하고 있으며 구성 요소가 내부적으로 정의되어 있습니다.
CSS가 더 어려워요. - 랜덤 클래스만 사용할 수 있어요. 다음은요?너는...
View on GitHub

흐르다

사용하는 모든 라이브러리에는 Streamig 친화적인 API가 있으며 원하는 최상의 TTFB를 제공합니다.

왜, 왜?

코드 분할, 코드 분할, 코드 분할, JS나 CSS 납품을 최적화하는 방법을 알고 싶다면.

✂️ 코드 분할 - 무엇, 언제, 왜

안동 코르조노프・ 10월 4일・ 12분 읽기

#react #codesplitting #webdev

결론

연결 API

로드 모듈

어셈블리 로드​

, 서버 측 추적

포함

babel 매크로 지원

은 웹팩에 연결되지 않았지만 더욱 깊은 브라우저 통합

을 지원합니다

당신을 위해 제작!

👉 https://github.com/theKashey/react-imported-component