限制 Angular/Webpack 块的大小

如何解决限制 Angular/Webpack 块的大小

我对 Angular 生态系统很陌生。我正在使用 Sentry 服务器来跟踪我的应用程序抛出的错误。不幸的是，我的 Angular 11 项目生成的 javascript 块文件太大，我的安装无法有效处理。

因此，我试图将 Angular 项目配置为不创建大于例如的块。 200KB 使用 Angular 内置的 SplitChunksPlugin。

如果我在“customWebpackConfig”中添加“优化”结构，基本上这会起作用。

不幸的是，这有一个缺点，即在生成我的 index.html 时，对我的 CSS 文件和大部分 javascript 块的引用都丢失了。

在不破坏默认行为的情况下配置 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",},"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>