Angular/Webpack 청크 크기 제한
나는 Angular 생태계에 꽤 익숙합니다.
Sentry 서버를 사용하여 애플리케이션에서 발생한 오류를 추적하고 있습니다. 불행히도 내 Angular 11 프로젝트에서 생성된 자바스크립트 청크 파일이 너무 커서 내 설치에서 효율적으로 처리할 수 없습니다.
따라서 예를 들어보다 큰 청크를 생성하지 않도록 Angular 프로젝트를 구성하려고 합니다. Angular 내장 SplitChunksPlugin을 사용하는 200KB.
기본적으로 "customWebpackConfig"에 "optimization" 구조를 추가하면 작동합니다.
불행히도 이것은 내 index.html을 생성할 때 내 CSS 파일과 대부분의 자바스크립트 청크에 대한 참조가 누락된다는 단점이 있습니다.
기본 동작을 중단하지 않고 SplitChunksPlugin을 구성하는 가장 좋은 방법은 무엇입니까?
angular.json
{
"version": 1,
"projects": {
"messenger": {
"projectType": "application",
"schematics": {
"@nrwl/angular:component": {
"style": "scss"
}
},
"root": "apps/messenger",
"sourceRoot": "apps/foo/src",
"prefix": "foo",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"replaceDuplicatePlugins": true
},
"outputPath": "dist/default",
"index": "apps/foo/src/index.html",
"main": "apps/foo/src/main.ts",
"polyfills": "apps/foo/src/polyfills.ts",
"tsConfig": "apps/foo/tsconfig.app.json",
"aot": true,
"assets": ["apps/foo/src/assets"],
"styles": ["apps/foo/src/styles.scss"],
"stylePreprocessorOptions": {
"includePaths": ["libs/shared/styles/src/lib"]
},
extra-webpack.config.js
const { InjectManifest } = require('workbox-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minChunks: 9,
maxInitialRequests: 19,
maxAsyncRequests: 29,
minSize: 99999,
maxSize: 199999,
enforceSizeThreshold: 119999,
}
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'apps/messenger/src/index.html',
showErrors: true,
}),
new InjectManifest({
swSrc: 'dist/service-worker.js',
swDest: `service-worker.js`,
compileSrc: false,
maximumFileSizeToCacheInBytes: 50000000,
}),
]
}
최적화 구성이 있거나 없는 index.html의 차이점은 다음과 같습니다.
$ diff -u index-without-acticated-optimization-config.html index-with-acticated-optimization-config.html |sed '~s,flip-root,foobar-root,g'
--- index-without-acticated-optimization-config.html 2021-05-16 12:48:56.409461873 +0200
+++ index-with-acticated-optimization-config.html 2021-05-16 12:46:35.905790852 +0200
@@ -20,7 +20,7 @@
<link rel="icon" type="image/png" href="assets/theme/icons/favicons/favicon-96x96.png" sizes="96x96"/>
<link rel="manifest" href="assets/tenant/manifest.json"/>
- <link rel="stylesheet" href="styles.c2478474b3fbc37b11ec.css"></head>
+ </head>
<body>
<noscript>
<div
@@ -48,5 +48,5 @@
</linearGradient>
</svg>
<foobar-root> </foobar-root>
- <script src="runtime-es2015.97090efd50524d776069.js" type="module"></script><script src="runtime-es5.97090efd50524d776069.js" nomodule defer></script><script src="polyfills-es5.23c58b44b91c23781d82.js" nomodule defer></script><script src="polyfills-es2015.bfc0d19950947f9e484a.js" type="module"></script><script src="vendor-es2015.8e1ef0067deec0ee52e2.js" type="module"></script><script src="vendor-es5.8e1ef0067deec0ee52e2.js" nomodule defer></script><script src="main-es2015.4b55af487645d54465f0.js" type="module"></script><script src="main-es5.4b55af487645d54465f0.js" nomodule defer></script></body>
+ <script src="runtime-es2015.739b4eb7c153a88dd0b6.js" type="module"></script><script src="runtime-es5.739b4eb7c153a88dd0b6.js" nomodule defer></script></body>
</html>
Reference
이 문제에 관하여(Angular/Webpack 청크 크기 제한), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/scoopex/limit-size-of-angular-chunks-45fk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
