Webpack DefinePlugin 속도 저하. 어떤 대안?

Question

우리는 Webpack DefinePlugin을 사용하여 다른 렌더링 모드에 대한 출력 번들을 생성합니다. 예를 들어, 우리의 웹팩 설정은 코드에서

[{ 
    entry: { 
     mode1: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode1', 
     })) 
    ] 
    },{ 
    entry: { 
     mode2: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode2', 
     })) 
    ] 
    }] 

를 반환합니다 그래서 우리는이 우리보다 각각 최적화 된 번들 모드 렌더링 생성 할 수 있습니다

if (__RENDER_MODE__ === 'mode1') { 
    require('jquery-ui') 
} 

if (__RENDER_MODE__ === 'mode2') { 
    require('other-lib') 
} 

할 것입니다. 그러나 렌더링 모드가 증가함에 따라 여러 웹 팩 컴파일이 실행되어 컴파일 프로세스가 크게 느려집니다. 나는이 문제를 해결하는 몇 가지 생각을 더 입력 듣고 싶어 :

1. 1 싱글 웹팩 컴파일을 사용하고 컴파일이 완료된 후 플러그인 교체를 정의 할 방법이 있나요를? 따라서 DefinePlugin을 컴파일 할 때 변수를 대체하는 대신, 한번만 컴파일 한 다음 나중에 교체 작업을 수행합니다.

2. 또는 DefinePlugin 항목마다 수행 할 수있는 방법이 있습니까? 각 항목에는 별도의 DefinePlugin 구성이 있습니다.

Answer 1

당신은 DefinePlugin 번들 실제로 무엇에 영향을 줄 수있는 무엇을하는 간단한 이유 컴파일 과정에서 DefinePlugin으로 무엇을 웹팩 실행해야합니다.

당신은 당신의 코드에서 다음과 같은 경우 :

if (__RENDER_MODE__ === 'mode1') { 
    require('someLibrary').render(); 
} 

웹팩은 IF는 조건이 참이 아닌 경우 항상 falsey입니다 볼 수있을만큼 스마트 될 것이며, someLibrary은 번들에 추가됩니다 그것은 경우 실제로 사용할 수 있습니다. Minification 단계 전에 DefinePlugin을 사용하는 것도 중요합니다. 예를 들어, 동일한 코드가 제거 도구로 제거됩니다.

따라서 간단히 말해서, DefinePlugin이 두 번들을 따로 컴파일하지 않도록 나중에 수행 할 방법이 없습니다.

두 번째 질문에 아니오, 항목마다 별도의 DefinePlugin을 사용할 수 없습니다. 두 항목 모두 모듈이 공통적으로 충돌 할 수 있다는 간단한 이유 때문입니다. 이 작업을 수행하는 유일한 방법은 이미 수행중인 것처럼 두 개의 별도 빌드를 사용하는 것입니다.