Fusebox 사용은 React 용 Webpack에 대한 번들링 대안으로 사용

웹 팩 대안을 찾고 계십니까? Fusebox를 고려하십시오. 코드 분할, 핫 모듈 재 장전, 동적 가져 오기 등 비슷한 기능을 제공하지만 상당한 이점이 있습니다. 코드 분할은 기본적으로 제로 구성입니다 (버전 4.0에서만 얻은 기능 웹 팩).

FuseBox는 단순성 (간소화 된 구성을 통해) 및 성능 (공격적인 캐싱을 통해)을 우선시합니다. 플러그인을 통한 확장 성을 통해 기본값을 넘어서 고급 요구를 처리 할 수 ​​있습니다. 또한 TypeScript 사용자의 경우 일류 시민입니다. 즉, TypeScript 프로젝트에는 추가 구성이 필요하지 않습니다. JavaScript 프로젝트는 똑같이 잘 지원됩니다.

사용 편의성을 보여주기 위해 기본 React 앱을 구축합시다. 전체 코드는 Github에서 사용할 수 있습니다.

Fusebox는 유일한 웹 팩 대안이 아닙니다. Maks Akymenko의 Parcel에 대한 훌륭한 기사는 또 다른 강력한 경쟁자를 강조합니다.

기본 설정

1. 새 프로젝트 디렉토리를 작성하고 NPM으로 초기화하십시오.

 mkdir csstricks-fusebox-react && cd $ _
npm init -y

2. React 및 React DOM을 설치하십시오.

 NPM 설치-반응 반응 -M.Save

3. FuseBox, TypeScript, UglifyJS 및 노드 SASS를 설치하십시오.

 NPM 설치-사브 DEV 퓨즈-박스 타입 스크립트 Uglify-JS 노드 스ass

4. src 폴더를 만들고 app.js 및 index.js 추가하십시오.

 // app.js
"반응"에서 반응하여 가져 오기 *;
"./logo.svg"에서 로고로 import *;

const app = () => (
  <div classname="App">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Fusebox 사용은 React 용 Webpack에 대한 번들링 대안으로 사용">
  </div>

위 내용은 Fusebox 사용은 React 용 Webpack에 대한 번들링 대안으로 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!