개미 디자인 - 막대한 수입품

개미 디자인 - 막대한 수입품

리액션 어플리케이션으로 개미 디자인 라이브러리를 사용하고 있습니다.

게다가 대량의 Import에 직면하고 있기 때문에, 번들에 악영향을 주고 있습니다(개미 디자인 lib로 인해 현재 미니버전의 1.1 MB).

모든 앱에서 antd 컴포넌트를 다르게 Import하려면 어떻게 해야 합니까?

갱신:

보이다antd에는 대형 모듈 또는 최적화되지 않은 모듈이 몇 개 있습니다.여기서 중요한 것은 Datepicker 모듈을 Import하는 것뿐입니다.boom! + 거의 2MB (dev 번들 of c)

UPD: 새로운 (4.0) 버전의 antd에서는 근본적인 문제가 해결된 것 같습니다.
따라서 이전 버전에서 이 문제를 해결하려면 antd 4로 마이그레이션하는 것이 좋습니다.

이전 답변:

현재 antd dist의 대부분은 SVG 아이콘입니다.
아직 공식적인 대처방법은 없습니다(github에서 문제 확인).

하지만 회피책이 있습니다.

1. 웹 팩을 조정하여 아이콘을 다르게 해결합니다.웹 팩 구성:

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

2. 만들다icons.js폴더에src/원하는 곳이라면 어디든지.에일리어스 경로와 일치하는지 확인하십시오.
   이 파일에서는 antd에 포함할 아이콘을 정의합니다.

export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

또, 이 조작은, 다음과 같이 실시할 수도 있습니다.react-app-rewired(create-display-application 변경사항) 내config-overrides.js

1) Antd가 전순간 국부화를 하지 않도록 한다.웹 팩 플러그인을 추가하고 다음과 같이 webpack.config.js에서 구성합니다.

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
    alias: {moment: `moment/moment.js`}
},
target: `web`
}

2) antd 라이브러리와 동일한 모멘트 버전을 사용합니다.

3) 모듈화된 antd 사용 babel-plugin-import 사용

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    // `style: true` for less
  ]
}

번들을 분석하려면 Bundle Analyzer Plugin을 사용합니다.

plugins: [new BundleAnalyzerPlugin()]

https://ant.design/docs/react/getting-started#Import-on-Demand 문서를 보면 개별 컴포넌트를 온 디맨드로 Import할 필요가 있습니다.그래서, 당신이 시도하고 바꿀 수 있습니다.

import { Button} from 'antd' 

와 함께

import Button from 'antd/lib/button'

편집하여 번들 크기를 500KB 줄였습니다.config-override.js다음과 같이 합니다.

config-displicate(설정)를 실행합니다.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.displaces

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

전에

끝나고

이 몇 가지 컴포넌트는 1이 아닙니다.다 같이 2백만.일부 구성 요소만 필요할 때 전체 라이브러리를 가져오는 것 같습니다.

갖기 위해antd필요한 모듈만 로드하려면 babel-module-import를 사용해야 합니다.콘솔 로그에서 해당 링크에 설명된 "You are using a package of antd" 경고를 확인합니다.

CRA를 사용하는 경우의 구현 방법에 대해서는 Create-React-App 문서를 참조하십시오.

웹 팩과 리액트라우터를 사용한 코드 분할을 사용해 보겠습니다.모듈을 비동기적으로 로드하는 데 도움이 됩니다.이것이 개미 프레임워크 사용 시 페이지 로딩 시간을 단축하는 데 도움이 되는 유일한 솔루션입니다.

큰 번들 사이즈의 원인이 된 문제는 Ant Design 4.0에서 수정되었습니다.

발매 발표에서 인용합니다.

소형

antd @ 3.9.0에서는 svg 아이콘([svg 아이콘을 사용하는 이유])이 도입되었습니다.string name을 사용한 아이콘 API는 온디맨드 로딩이 불가능하여 svg 아이콘 파일이 완전히 도입되어 패키지화된 제품의 사이즈가 크게 증가하였습니다.4.0에서는 아이콘 사용 API를 트리 흔들기에 대응하도록 조정하여 Antant의 기본 패키지 크기를 약 150KB(Gzipped) 줄였습니다.

Ant Design 4를 설치하려면 다음 작업을 수행해야 합니다.

npm install antd@4.0.0-rc.1
// or  in yarn
yarn add antd@4.0.0-rc.1

언급URL : https://stackoverflow.com/questions/48721290/ant-design-huge-imports