0

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

因此，我正在尝试使用 Angular 内置的 SplitChunksPlugin 配置 Angular 项目以不创建大于例如 200KB 的块。

基本上，如果我在“customWebpackConfig”中添加“优化”结构，这将有效。

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

在不破坏默认行为的情况下配置 SplitChunksPlugin 的最佳实践方法是什么。

角.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"]
                        },

额外的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>
4

0 回答 0