CommonsChunkPlugin을 사용하여 공용 모듈을 추출하는 방법

이제 공용 모듈을 추출하는 CommonsChunkPlugin에 대해 간략하게 설명하겠습니다. 이는 훌륭한 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

소개

웹팩 플러그인 CommonsChunkPlugin의 주요 기능은 웹팩 프로젝트 항목 청크의 공통 부분을 추출하는 것입니다. 구체적인 사용법은 많이 모르시면 소개하지 않겠습니다. webpack 공식 홈페이지 소개를 참고하세요.

플러그인 webpack 프로젝트에서 흔히 사용되는 최적화 기능으로 거의 모든 webpack 프로젝트에서 사용됩니다. 이 플러그인 사용의 이점:

웹팩 패키징 속도 및 프로젝트 크기 향상: 웹팩 항목의 청크 파일에서 모든 공통 코드를 추출하여 동시에 코드 크기를 줄이고 웹팩 패키징 속도를 향상시킵니다.

캐싱 메커니즘 활용: 귀하가 의존하는 공개 모듈 파일은 일반적으로 거의 변경되지 않거나 변경되지 않으므로 독립 모듈 파일을 오랫동안 캐시할 수 있습니다.

그러나 프로젝트에서 플러그인 열기 방법이 올바르지 않으면 위의 두 번째 사항을 실제로 달성하는 것이 불가능합니다. 왜냐하면 이 경우:

수정되지 않은 공개 코드 또는 라이브러리 코드로 패키징된 Entry Chunk 다른 비즈니스 코드가 변경됨에 따라 변경되어 페이지의 긴 캐시 메커니즘이 실패하게 됩니다.

그럼 CommonsChunkPlugin을 올바르게 열어보겠습니다.

CommonsChunkPlugin

React, React-dom, React-Router와 같은 프로젝트의 공용 라이브러리를 비즈니스 코드에서 분리하면 이를 공급업체 청크로 추출하고 웹팩 구성은 다음과 같습니다.

const webpack = require("webpack");
const path = require('path');
module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 output: {
 path: path.resolve(__dirname, 'output'),
 filename: "[name].[chunkhash].js"
 },
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
 ]
};

위 내용은 프로젝트의 일부 기본 라이브러리를 Vendor라는 덩어리로 패키징하고, 비즈니스 관련 코드를 app이라는 덩어리로 패키징합니다.

webpack 패키징 및 컴파일 후의 결과는 다음과 같습니다.

그 안의 비즈니스를 분석해 보니 app.js 코드를 수정한 후 재컴파일한 결과는 다음과 같습니다.

CommonsChunkPlugin 구성에서 비즈니스 코드 앱이 변경되면, 라이브러리 코드도 변경되고 공급업체의 청크 해시도 변경되므로 공급업체 참조 이름이 그에 따라 변경되어 브라우저 측의 긴 캐시 메커니즘이 실패하게 됩니다.

문제의 원인

webpack을 패키징하고 컴파일할 때마다 공급업체가 바뀌는 이유:

webpack은 빌드될 때마다 일부 런타임 코드를 생성합니다. 파일이 하나만 있는 경우 런타임 코드가 이 파일에 직접 삽입됩니다. 파일이 여러 개인 경우 런타임 코드는 위의 CommonsChunkPlugin에서 구성한 공급업체 청크인 공통 파일로 추출됩니다.

전역 webpackJsonp 메서드 정의 및 모듈 종속성 유지 관리를 포함하여 webpack이 컴파일될 때마다 생성되는 런타임 코드는 여기에서 commons.js를 참조하세요.

그래서 위 webpack의 CommonsChunkPlugin 구성에서 이러한 코드는 컴파일될 때마다 공급업체에 패키징되므로 공급업체의 청크 해시가 매번 변경됩니다.

그런 다음 공급업체 청크를 구성하고 공통 코드, 즉 웹팩 런타임 코드를 추출하여 프로젝트가 의존하는 기본 라이브러리 모듈을 비즈니스 모듈에서 격리할 수 있습니다. 이러한 파일은 수정되지 않기 때문입니다. . 이므로 이러한 파일은 긴 캐시 기능을 구현할 수 있습니다. 구체적인 구성은 다음과 같습니다.

module.exports = {
 entry: {
 app: "./app.js",
 vendor: ["react","react-dom", "redux", "react-redux", "react-router-redux"]
 },
 ....
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}),
 new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
 })
 ]
};

이렇게 하면 비즈니스 앱 코드가 수정되더라도 프로젝트가 의존하는 기본 라이브러리 공급업체 청크는 변경되지 않고 추출된 매니페스트 청크만 매번 변경되며 파일은 변경되지 않습니다. 업체에 비해 크기가 매우 작습니다. 이렇게 하면 이점이 더 크다고 합니다. 아래와 같습니다.

앱 코드를 수정한 후 패키징 및 컴파일한 결과는 다음과 같습니다. 공급업체의 ChunkHash가 변경되지 않은 것을 확인할 수 있습니다

webpack에서 CommonsChunkPlugin 구성 시 주의할 점이 하나 있습니다. :

webpack의 출력 항목을 구성합니다. When의 파일 이름과 ChunkFilename은 ChunkHash를 사용해야 합니다. 해시를 사용하지 마십시오. 그렇지 않으면 위 구성에 따라서도 예상한 결과를 얻을 수 없습니다. 해시와 청크해시의 차이점은 github의 답변을 참조하세요

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue2.0 상위 컴포넌트와 하위 컴포넌트 간의 디스패치 메커니즘 구현에 대해(자세한 튜토리얼)

jQuery+SpringMVC 체크박스 선택 및 값 전달 example_jquery

SpringMVC에 게시하는 방법 다중 선택 상자 값(코드 예)

Vue를 사용하여 여러 클래스를 설정하는 방법

위 내용은 CommonsChunkPlugin을 사용하여 공용 모듈을 추출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!