gzip 빌드 -Job name “..getProjectMetadata” does not exist

angular 빌드 시 gzip형태 빌드를 하려고 할때, npm run-script build-prod를 사용하여 빌드시, 발생 하는 에러

빌드시 버전 문제와 함께 package가 없는 경우 발생 하였습니다.

 

stackoverflow.com/questions/60174503/job-name-getprojectmetadata-does-not-exist

Job name "..getProjectMetadata" does not exist

해결책 :

npm i @angular-devkit/build-angular@0.803.24

하고 나면,  custom-webpack을 깔았으니 잘될줄 알았지만 안되었습니다. compression-webpack-plugin  없다고 해서 다시 설치 해줍니다.

An unhandled exception occurred: Cannot find module 'compression-webpack-plugin'

npm i compression-webpack-plugin

이번에도 또 없다고 하여 다시 설치 합니다.

An unhandled exception occurred: [BABEL] D:\2020\fibergate\fibergate-web\dist\2-es2015.145816c1e5ecd9992b37.js: Could not find plugin "proposal-class-properties"

npm install --save-dev @babel/plugin-proposal-class-properties

medium.com/@subodhkumarjc/angular-build-optimization-part-2-compression-b866dd0593c3

Angular Build Optimization | Part #2 | Compression

무엇이 문제인가 해서 다시 처음으로 돌아가 시작 해봅시다.

 

1. 설치

npm i -D @angular-builders/custom-webpack

기본 angular.json의 아래내용 추가를 합니다.

"architect": {

                "build": {

                    "builder": "@angular-devkit/build-angular:browser", =>(변경)

"@angular-builders/custom-webpack:browser",

                    "options": {

                        "outputPath": "dist",

                        "index": "src/index.html",

                        "main": "src/main.ts",

                        "polyfills": "src/polyfills.ts",

                        "tsConfig": "src/tsconfig.app.json",

                        "assets": [

                            "src/favicon.ico",

                            "src/assets",

                            {

                                "glob": "**/*",

                                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",

                                "output": "/assets/"

                            }

                        ],

                        "styles": [

                            "src/styles.scss",

                            "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",

                            "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css"

                        ],

                        "scripts": [],

                        "showCircularDependencies": false,
            (추가)

            "customWebpackConfig": {

              "path": "./custom-webpack.config.js"

             }

 

                    },

 

2. 설치

$ npm install compression-webpack-plugin --save-dev

상위 angular.js와 package.json과 같은 위치dp custom-webpack.config.js 파일을 생성 하여 아래와 같은 내용을 추가 합니다. 옵션에 대한 내용은 별도 생략 합니다.

const CompressionPlugin = require(`compression-webpack-plugin`);
module.exports = {
    plugins:[
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ],
}

 

3. angular 버전 확인

package.json을 파일의 dependencis의 angular에 대한 버전을 확인하여 맞춰 줍니다. (이놈이 문제였던것으로 추정중)

 

dependencies": {

    "@agm/core": "1.0.0-beta.5",

    "@angular-devkit/build-angular": "0.901.12",

    "@angular/animations": "9.0.0-next.2",

    "@angular/cli": "9.1.12",

      ...

     "compression-webpack-plugin": "5.0.1",

     ...

  },

  "devDependencies": {

    "@angular-builders/custom-webpack": "8.4.1",

 

npm install을 한 후 build를 한다.

 

build가 정상적으로 생성 되며, dist폴더의 .js 파일들이 .gz 으로 생성 되었습니다.

 

 

빌드가 완료 되면,   apache-tomcat에서도 gzip 압축 전송하기를 설정을 해줍니다.

 

환경설정만 바꿔 주면 됩니다.

 

설치한 톰캣의 /tomcat/conf/폴더를 이동한 후 server.xml을  에디터로 편집을 합니다.

해당하는 서비스에 아래의 내용을 입력 합니다.

compression="on"
compressionMinSize="1024"
noCompressionUserAgents="gozilla, traviata"

옵션 설명은 아래와 같습니다.

Connector 노드에 
compression, compressionMinSize, noCompressionUserAgents, compressableMimeType 노드를 추가합니다.

compression : default "off" 
압축전송기능 사용여부를 설정합니다. 당연히 이 기능을 쓰기위해선 on으로 설정해야합니다.

compressionMinSize : default "2048"
byte단위로 몇 이상 크기부터 압축할지를 결정합니다.
너무 작은 크기를 압축하면 오히려 서버의 자원낭비가 될 수 있습니다.
(물론 작은크기에서 압출률도 별로 의미가 없습니다.)

noCompressionUserAgents : default ""
압축을 사용하지 않을 유저에이전트(브라우저)를 설정합니다.

compressableMimeType : default ""
압축을 사용할 파일분류를 설정합니다.

확인 후 tocat service를 다시 시작 합니다.