How can optimize application?

Question

I am using angular 12 and webpack 5.

When building a production version, the files weigh more than recommended limit.

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

vendor (1 MiB) static/js/vendor.359496346b0a5a782f4a.js

app (509 KiB) static/js/app.99781bb2b1b311146d5c.js

What else can you do to optimize?

I don't want to hide the message using performance: { hints: false }.

webpack.config.prod.js:

const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const commonConfig = require('./webpack.config.common.js');
const ngw = require('@ngtools/webpack');
const path = require('path');

const paths = require('./paths');

const productionConfig = {
    output: {
        path: paths.appBuildPath,
        publicPath: './',
        filename: `${paths.outputJSPath}[name].[contenthash].js`,
        chunkFilename: `${paths.outputJSPath}[id].[chunkhash].chunk.js`
    },

    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new ngw.AngularWebpackPlugin({
            tsConfigPath: path.resolve('../tsconfig.aot.json'),
            entryModule: path.resolve('../src/app/app.module#AppModule')
        })
    ],

    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
                terserOptions: {
                    parse: {
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2,
                    },
                    mangle: {
                        safari10: true,
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        ascii_only: true,
                    },
                },
                parallel: true
            })
        ]
    }
};

module.exports = () => {
    return merge(commonConfig, productionConfig);
}

package.json:

{
  "name": "webpack-angular",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack --mode development",
    "build:prod": "cross-env NODE_ENV=production webpack --mode production"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^12.0.5",
    "@ngtools/webpack": "^12.0.5",
    "angular2-template-loader": "^0.6.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "cross-env": "^7.0.3",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "http-server": "^0.12.3",
    "ts-loader": "^9.2.3",
    "typescript": "^4.2.3",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@angular/common": "^12.0.5",
    "@angular/compiler": "^12.0.5",
    "@angular/core": "^12.0.5",
    "@angular/platform-browser": "^12.0.5",
    "@angular/platform-browser-dynamic": "^12.0.5",
    "core-js": "^3.14.0",
    "rxjs": "^7.1.0",
    "zone.js": "^0.11.4"
  }
}

webpack.config.common.js:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './polyfills.ts',
        'vendor': './vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: { configFile:  './tsconfig.json' }
                    }, 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                parser: { system: true }
            },
            {
                test: /\.(ico)$/,
                use: "file-loader?name=[name].[ext]"
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.ContextReplacementPlugin(
            /\@angular(\\|\/)core(\\|\/)fesm5/
        )
    ]
};