패키징 출력의 디렉터리 크기를 합리화하기 위해 distCDN 외부 패키지를 도입하여 패키징 볼륨을 줄이고 패키징 속도를 높일 수 있습니다. 소개하는 방법을 Vite소개 합니다 .WebpackReact CDN外部包
1. Vite, CDN 패키지 출시
1. 플러그인 설치
npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D
이전에 package.json설치한 경우 react삭제하는 것을 잊지 마세요.
2. 수동 구성
// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'
export default {
plugins: [
importToCDN({
modules: [
{
name: 'react',
var: 'React',
path: `umd/react.production.min.js`,
},
{
name: 'react-dom',
var: 'ReactDOM',
path: `umd/react-dom.production.min.js`,
},
],
}),
],
}
- name: 프로젝트에
import도입될 때 패키지 이름 인 모듈 이름입니다. 예:import React, { useState } from 'react'; - var: cdn external package
var에 의해 정의된 전역 변수 이름입니다 . - 경로: CDN 외부 패키지의 주소입니다.
3. 자동 구성
// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN, {
autoComplete } from 'vite-plugin-cdn-import'
export default {
plugins: [
importToCDN({
modules: [
autoComplete('react'),
autoComplete('react-dom')
],
}),
reactRefresh(),
],
}
자동 구성이 지원되는 패키지:
"react" | "react-dom" | "react-router-dom" |
"antd" | "ahooks" | "@ant-design/charts" |
"vue" | "vue2" | "@vueuse/shared" |
"@vueuse/core" | "moment" |
"eventemitter3" | "file-saver" |
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"
2. Webpack에는 CDN 패키지가 도입되었습니다.
이전에 package.json설치한 경우 react삭제하는 것을 잊지 마세요.
1. config/config.js 구성
export default defineConfig({
// webpack5: {
// externals: {
// react: "React"
// }
// },
chainWebpack(config) {
config.externals({
// '模块名': '全局变量名'
react: 'React',
});
}
})
2. HTML 템플릿 수정
그것을 열고 src\pages\document.ejs태그에 다음 파일을 추가하십시오:
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
3. CDN 오픈소스 패키지 창고
권장 CDN 패키지 창고: https://www.bootcdn.cn/react/
권장 버전 UMD, 예:
- UMM: UMD 버전의 공통 모듈 버전으로, 여러 모듈 방법을 지원합니다.
- EJS: CommonJS - 주로 Nodejs 프로젝트에서 사용됩니다.
- ESM: es6의 esmodule의 정적 도입 메커니즘을 기반으로 하는 ECMAScript 모듈입니다.