From 94f402021d2c477e4b5c5be96306b8e2eb4c0b75 Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Mon, 13 Nov 2023 14:56:56 +0300 Subject: [PATCH] ci: enable prerender for production build (#5929) --- .github/workflows/bundle-size-tracking.yml | 3 +- .github/workflows/snapshots.yml | 2 +- projects/demo/project.json | 12 +- projects/demo/webpack.config.ts | 135 +++++++++++---------- projects/demo/webpack.server.config.ts | 3 + 5 files changed, 89 insertions(+), 66 deletions(-) create mode 100644 projects/demo/webpack.server.config.ts diff --git a/.github/workflows/bundle-size-tracking.yml b/.github/workflows/bundle-size-tracking.yml index 9c5614d704d4..f057eb5ca3f2 100644 --- a/.github/workflows/bundle-size-tracking.yml +++ b/.github/workflows/bundle-size-tracking.yml @@ -3,7 +3,6 @@ on: push: branches: [main] pull_request: - types: [synchronize, opened, reopened] jobs: tracking: @@ -13,7 +12,7 @@ jobs: - uses: taiga-family/ci/actions/setup/checkout@v1.39.1 - uses: taiga-family/ci/actions/setup/variables@v1.39.1 - uses: taiga-family/ci/actions/setup/node@v1.39.1 - - run: npx nx build demo + - run: npx nx prerender demo - run: npx --yes bundlemon --config .github/.bundlemonrc.json continue-on-error: true env: diff --git a/.github/workflows/snapshots.yml b/.github/workflows/snapshots.yml index 1bcc85f8900b..1d4af43ec83f 100644 --- a/.github/workflows/snapshots.yml +++ b/.github/workflows/snapshots.yml @@ -34,7 +34,7 @@ jobs: - uses: taiga-family/ci/actions/setup/node@v1.39.1 id: nodejs-workspace - - run: npx nx build demo --configuration production + - run: npx nx prerender demo - run: tree ${{ env.DIST }} -P '*.html' - name: Publish snapshots uses: s0/git-publish-subdir-action@v2.6.0 diff --git a/projects/demo/project.json b/projects/demo/project.json index 0161936cc8a9..16df19a7e777 100644 --- a/projects/demo/project.json +++ b/projects/demo/project.json @@ -227,7 +227,7 @@ "executor": "@angular-builders/custom-webpack:server", "options": { "customWebpackConfig": { - "path": "projects/demo/webpack.config.ts" + "path": "projects/demo/webpack.server.config.ts" }, "outputPath": "dist/demo/server", "main": "projects/demo/server.ts", @@ -250,11 +250,19 @@ "options": { "browserTarget": "demo:build:production", "serverTarget": "demo:server:production", + "guessRoutes": false, "routes": ["/"] }, "configurations": { "production": {} - } + }, + "dependsOn": [ + { + "target": "i18n", + "params": "ignore" + } + ], + "defaultConfiguration": "production" }, "test": { "executor": "@nx/jest:jest", diff --git a/projects/demo/webpack.config.ts b/projects/demo/webpack.config.ts index 9237dcfc1796..5ebc907a4cf4 100644 --- a/projects/demo/webpack.config.ts +++ b/projects/demo/webpack.config.ts @@ -1,10 +1,14 @@ import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli'; import {tuiIsObject} from '@taiga-ui/cdk'; import TerserPlugin from 'terser-webpack-plugin'; -import {Configuration} from 'webpack'; +import {Configuration, RuleSetRule} from 'webpack'; import {merge} from 'webpack-merge'; -const CI_MODE = process.env[`TUI_CI`] === `true`; +interface Options { + server: boolean; +} + +type WebpackConf = (ngConfigs: Configuration) => Configuration; /** * We can't just import TS-file to get its content @@ -51,70 +55,79 @@ const fallbackCreateHash = crypto.createHash; crypto.createHash = (algorithm: string) => fallbackCreateHash(algorithm === `md4` ? `sha256` : algorithm); -const TERSER_PLUGIN = new TerserPlugin({ - parallel: true, - extractComments: false, - terserOptions: { - ecma: 2015, - mangle: true, - module: true, - sourceMap: false, - compress: { - passes: 3, - keep_fnames: false, - keep_classnames: false, - pure_funcs: [`forwardRef`], - global_defs: GLOBAL_DEFS_FOR_TERSER_WITH_AOT, - }, - format: { - comments: false, - }, - }, -}); - -const config: Configuration = { - resolve: { - fallback: { - punycode: false, - }, - }, - module: { - /** - * With Webpack 5, the raw-loader is no longer needed. - * Asset modules provide a built-in way to provide raw-loader functionality without additional dependencies. - * @see https://webpack.js.org/guides/asset-modules/ - */ - rules: [ - { - test: /\.(ts|html|css|less|md|svg)$/i, - resourceQuery: RAW_TS_QUERY, - type: `asset/source`, +export function makeWebpackConfig({server}: Options): WebpackConf { + const terserPlugin = new TerserPlugin({ + parallel: true, + extractComments: false, + terserOptions: { + ecma: 2015, + mangle: true, + module: true, + sourceMap: false, + compress: { + passes: 3, + keep_fnames: false, + keep_classnames: false, + pure_funcs: [`forwardRef`], + global_defs: GLOBAL_DEFS_FOR_TERSER_WITH_AOT, + }, + format: { + comments: false, }, - ], - }, - ...(CI_MODE - ? { - mode: `production`, - plugins: [TERSER_PLUGIN], - optimization: {minimize: true, minimizer: [TERSER_PLUGIN]}, - } - : {}), -}; + }, + }); -// noinspection JSUnusedGlobalSymbols -export default (ngConfigs: Configuration): Configuration => { - const ngRules = [...(ngConfigs.module?.rules || [])].map(rule => { - if ( + return (ngConfigs: Configuration): Configuration => { + const ngRules = [...(ngConfigs.module?.rules || [])].map(rule => tuiIsObject(rule) && DO_NOT_MUTATE_RAW_FILE_CONTENTS.some( pattern => rule.test instanceof RegExp && rule.test?.test(pattern), ) - ) { - return {...rule, resourceQuery: {not: [RAW_TS_QUERY]}}; - } + ? { + ...(rule as unknown as RuleSetRule), + resourceQuery: {not: [RAW_TS_QUERY]}, + } + : rule, + ); - return rule; - }); + return merge( + { + ...ngConfigs, + module: { + ...ngConfigs.module, + rules: ngRules, + }, + }, + { + resolve: { + fallback: { + punycode: false, + }, + }, + module: { + /** + * With Webpack 5, the raw-loader is no longer needed. + * Asset modules provide a built-in way to provide raw-loader functionality without additional dependencies. + * @see https://webpack.js.org/guides/asset-modules/ + */ + rules: [ + { + test: /\.(ts|html|css|less|md|svg)$/i, + resourceQuery: RAW_TS_QUERY, + type: `asset/source`, + }, + ], + }, + ...(process.env[`TUI_CI`] === `true` && !server + ? { + mode: `production`, + plugins: [terserPlugin], + optimization: {minimize: true, minimizer: [terserPlugin]}, + } + : {}), + }, + ); + }; +} - return merge({...ngConfigs, module: {...ngConfigs.module, rules: ngRules}}, config); -}; +export default makeWebpackConfig({server: false}); diff --git a/projects/demo/webpack.server.config.ts b/projects/demo/webpack.server.config.ts new file mode 100644 index 000000000000..622520682f8d --- /dev/null +++ b/projects/demo/webpack.server.config.ts @@ -0,0 +1,3 @@ +import {makeWebpackConfig} from './webpack.config'; + +export default makeWebpackConfig({server: true});