일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- nodejs
- 요구사항정의서 #기획 #UI/UX기획
- es5 #es6
- passport.js
- Javascript #MDN #Webs #Docs
- 해시함수
- TensorFlow
- javascript #prototype # array # find()
- privateKey
- anaconda
- securitykey
- Git
- keytool
- angular
- guide
- tsotry
- CSS #flex
- 웹기획
- SSL인증서
- typescript
- CSS #pseudo-classes
- Vue
- Ke
- 일기
- webpack
- behaviorsubject
- Storyboard
- PublicKey
- 안좋은습관10가지
- 가상사설망
- Today
- Total
민자의 지식창고
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
I updated my angular to v9 and when I try to go back in v8, I receive this error. I have already tried the following: uninstall -global angular/cli uninstall angular/cli go back to my last package...
stackoverflow.com
해결책 :
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
One of the main requirement for any application is to perform well & fast for its users. For a given web application, the performance…
medium.com
무엇이 문제인가 해서 다시 처음으로 돌아가 시작 해봅시다.
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를 다시 시작 합니다.
'개발노트 > Front-end' 카테고리의 다른 글
Redirect & Forward (0) | 2020.08.25 |
---|