限制 Angular/Webpack 块的大小

编程问答 2022-05-02

问题描述

我对 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularchunkingwebpackwebpackwebpackwebpack-splitchunks