웹팩 성능 최적화
- 小云云원래의
- 2018-01-04 14:08:331847검색
Webpack 성능을 최적화하는 방법에는 여러 가지가 있습니다. 이 기사에서 dll을 별도로 설명하는 이유는 dll이 가장 간단하고 조악하며 매우 효과적인 최적화 방법이기 때문입니다. 이번 글은 웹팩 성능 최적화-DLL에 대한 자세한 설명을 주로 소개합니다. 편집자는 꽤 괜찮다고 생각해서 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
일반적인 패키징 프로세스에서는 jquery, bootstrap, React, React-router, redux, antd, vue, vue-router, vuex 등과 같이 참조하는 많은 라이브러리도 번들 파일로 패키징됩니다. 이러한 라이브러리의 내용은 기본적으로 절대 변경되지 않으므로 이를 각 패키지에 추가하는 것은 의심할 여지 없이 엄청난 성능 낭비입니다.
Dll 기술은 처음으로 가져온 모든 라이브러리를 dll.js 파일로 패키징하고, 직접 작성한 내용을 Bundle.js 파일로 패키징하여 후속 패키징에서는 번들 부분만 처리하면 되도록 하는 것입니다.
Vue 프로젝트를 예로 들어 보겠습니다. 먼저 webpack.dll.config.js
var path = require("path"),
fs = require('fs'),
webpack = require("webpack");
var vendors = [
'vue',
'vue-router',
'vuex'
];
module.exports = {
entry: {
vendor: vendors
},
output: {
path: path.join(__dirname, "dist"),
filename: "Dll.js",
library: "[name]_[hash]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dist", "manifest.json"),
name: "[name]_[hash]",
context: __dirname
})
]
};라는 파일을 만듭니다. 이 파일의 기능은 vue, vue-router 및 vuex를 Dll이라는 파일로 병합하고 패키지하는 것입니다. .js 정적 리소스 패키지이며 Dll.js의 모듈에 대한 참조를 용이하게 하기 위해 Manifest.json 파일도 생성합니다.
webpack 명령을 실행하면 기본적으로 이 디렉터리에 있는 webpack.config.js 또는 webpackfile.js라는 파일이 실행된다는 점에 유의하세요. 따라서 --config 명령을 통해 파일을 수동으로 지정하고, 마지막으로 -p 명령을 추가하여 Dll.js를 압축해야 합니다.
$ webpack --config webpack.dll.config.js -p
이런 식으로 압축된 Dll.js 및 매니페스트.json 파일이 포함된 추가 dist 폴더가 프로젝트 루트 디렉터리에 추가됩니다.
manifest.json 파일의 내용은 다음과 같습니다. 참고용으로 각 모듈에 ID를 부여하세요.
{
"name": "vendor_2beb750db72b1cda4321",
"content": {
"./node_modules/process/browser.js": {
"id": 0,
"meta": {}
},
"./node_modules/vue-router/dist/vue-router.esm.js": {
"id": 1,
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
"./node_modules/vue/dist/vue.runtime.esm.js": {
"id": 2,
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
//.......마지막으로 webpack.config.js에 참조를 추가합니다. 플러그인 속성에 DllReferencePlugin 플러그인을 추가하고 매니페스트.json 파일에 대한 참조 경로를 지정합니다.
//...
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/manifest.json')
})
]webpack.dll.config.js 파일이 성공적으로 실행되었는지 확인한 후 webpack -p를 실행하여 프로젝트를 패키징합니다.
Dll 파일에 패키징된 파일들이 번들 파일에 직접 들어가는 것이 아니라 위임(delegated)된 것을 볼 수 있습니다.
이렇게 해서 모든 리소스를 패키징했고 생성된 dist 디렉터리는 다음과 같습니다.
하지만 dist 폴더가 완전한 프로젝트가 되려면 여전히 제가 만든 html 파일이 필요합니다. pack.js 파일이라는 이름의 하나는 nodejs의 fileSystem을 사용하여 html 파일을 수정하고 복사합니다.
pack.js
var fs = require('fs');
fs.readFile('./index.html', 'utf8', (err, data) => {
if (!err) {
var dataStr = data.toString(),
timestamp = (new Date()).getTime();
dataStr = dataStr
.replace('bundle.js', 'bundle.js?v='+timestamp)
.replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>');
fs.writeFile('./dist/index.html', dataStr, (error) => {
if (!error) {
console.log('HTML file copy successfully');
} else {
console.log(error);
}
});
} else {
console.log(err);
}
});모듈의 항목 html에 b77a9b994ab1dbd000a29af0dd12365f의 자리 표시자 문자를 추가해야 합니다. pack.js의 기능은 html 파일을 dist에 복사하는 것입니다. 디렉토리를 선택하고 b77a9b994ab1dbd000a29af0dd12365f을 Dll.js를 참조하는 스크립트 태그로 바꾸고 파일을 참조한 후 타임스탬프를 추가합니다.
<!-- .... --> <body> <p id="demo" class="container"></p> <!-- dll --> <script src="./bundle.js"></script> </body> </html>
webpack -p 패키징을 실행한 후 다음 명령어를 입력하여 pack.js를 실행하면 dist 디렉터리에 html 파일이 생성됩니다.
$ node pack.js
내용은 다음과 같습니다.
<!-- .... --> <body> <p id="demo" class="container"></p> <script src="./dist/Dll.js?v=1488250309725"></script> <script src="./bundle.js?v=1488250309725"></script> </body> </html>
이렇게 하면 dist 폴더를 수동 작업이 필요 없는 완전하고 압축되고 난독화된 프로젝트로 온라인에 직접 배포할 수 있습니다.
실제 프로젝트 템플릿 참조 주소는 다음과 같습니다. 저자는 React와 Vue를 동시에 사용하는 개발자이기 때문에 나중에 yomen(yo) 등을 통해 스캐폴딩 툴링을 위해 두 개의 템플릿을 만들었습니다.
관련 권장사항:
mockjs를 사용하여 vue, vuecli 및 webpack에서 백엔드 데이터 시뮬레이션
위 내용은 웹팩 성능 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!