Skip to content

Commit d9f77c5

Browse files
author
김재관
committed
chore: webpack 성능 개선(ts-loader, eslint-webpack-plugin제거)
webpack의 성능 개선을 위해 @babel/preset-typescript로 타입스크립트를 컴파일하고 타입스크립트의 린트는 기존과 동일하게 fork-ts-chreker-webpack-plugin를 통해 진행한다. js, jsx에 대한 린트의 경우 eslint-webpack-plugin을 제거하고 fork-ts-chreker-webpack-plugin를 통해 진행한다. fork-ts-chreker-webpack-plugin는 tsconfig를 참조하지만 babel은 참조하지 않는다. 이점 우려되는 부분이지만 좀더 사용해봐야 할것같다.
1 parent 4485faa commit d9f77c5

5 files changed

Lines changed: 48 additions & 61 deletions

File tree

‎babel.config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"corejs": "3"
99
}
1010
],
11-
["@babel/preset-react"]
11+
["@babel/preset-react"],
12+
["@babel/preset-typescript"]
1213
]
1314
}

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@babel/core": "^7.13.10",
1616
"@babel/preset-env": "^7.13.10",
1717
"@babel/preset-react": "^7.12.13",
18+
"@babel/preset-typescript": "^7.13.0",
1819
"@types/react": "^17.0.3",
1920
"@types/react-dom": "^17.0.2",
2021
"@typescript-eslint/eslint-plugin": "^4.17.0",
@@ -28,13 +29,11 @@
2829
"eslint-plugin-jsx-a11y": "^6.4.1",
2930
"eslint-plugin-react": "^7.22.0",
3031
"eslint-plugin-react-hooks": "^4.2.0",
31-
"eslint-webpack-plugin": "^2.5.2",
3232
"file-loader": "^6.2.0",
3333
"fork-ts-checker-webpack-plugin": "^6.1.1",
3434
"friendly-errors-webpack-plugin": "^1.7.0",
3535
"html-webpack-plugin": "4.5.2",
3636
"terser-webpack-plugin": "4.2.3",
37-
"ts-loader": "^8.0.17",
3837
"typescript": "^4.2.3",
3938
"url-loader": "^4.1.1",
4039
"webpack": "^4.46.0",

‎tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
/* Basic Options */
66
// "incremental": true, /* Enable incremental compilation */
77
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
8-
"module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
8+
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
99
// "lib": [], /* Specify library files to be included in the compilation. */
1010
"allowJs": true, /* Allow javascript files to be compiled. */
1111
// "checkJs": true, /* Report errors in .js files. */
12-
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
12+
"jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
1313
// "declaration": true, /* Generates corresponding '.d.ts' file. */
1414
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
1515
// "sourceMap": true, /* Generates corresponding '.map' file. */

‎webpack/webpack.config.core.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
const path = require('path');
22
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
33
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
4-
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
54
const HtmlWebpackPlugin = require('html-webpack-plugin');
65

76
module.exports = {
@@ -19,9 +18,18 @@ module.exports = {
1918
},
2019
plugins: [
2120
new FriendlyErrorsWebpackPlugin(),
22-
new ForkTsCheckerWebpackPlugin(),
23-
new ESLintWebpackPlugin({
24-
extensions: ['js', 'jsx', 'ts', 'tsx'],
21+
new ForkTsCheckerWebpackPlugin({
22+
eslint: {
23+
enabled: true,
24+
files: './src/**/*',
25+
},
26+
typescript: {
27+
diagnosticOptions: {
28+
semantic: true,
29+
syntactic: true,
30+
},
31+
mode: 'write-references',
32+
},
2533
}),
2634
new HtmlWebpackPlugin({
2735
template: path.resolve(__dirname, '../public/index.html'),
@@ -40,13 +48,7 @@ module.exports = {
4048
{
4149
test: /\.(jsx?|tsx?)$/,
4250
exclude: /node_modules/,
43-
use: [
44-
{ loader: 'babel-loader' },
45-
{
46-
loader: 'ts-loader',
47-
options: { transpileOnly: true },
48-
},
49-
],
51+
loader: 'babel-loader',
5052
},
5153
],
5254
},

‎yarn.lock‎

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,13 @@
465465
dependencies:
466466
"@babel/helper-plugin-utils" "^7.12.13"
467467

468+
"@babel/plugin-syntax-typescript@^7.12.13":
469+
version "7.12.13"
470+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz#9dff111ca64154cef0f4dc52cf843d9f12ce4474"
471+
integrity sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==
472+
dependencies:
473+
"@babel/helper-plugin-utils" "^7.12.13"
474+
468475
"@babel/plugin-transform-arrow-functions@^7.13.0":
469476
version "7.13.0"
470477
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz#10a59bebad52d637a027afa692e8d5ceff5e3dae"
@@ -731,6 +738,15 @@
731738
dependencies:
732739
"@babel/helper-plugin-utils" "^7.12.13"
733740

741+
"@babel/plugin-transform-typescript@^7.13.0":
742+
version "7.13.0"
743+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz#4a498e1f3600342d2a9e61f60131018f55774853"
744+
integrity sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==
745+
dependencies:
746+
"@babel/helper-create-class-features-plugin" "^7.13.0"
747+
"@babel/helper-plugin-utils" "^7.13.0"
748+
"@babel/plugin-syntax-typescript" "^7.12.13"
749+
734750
"@babel/plugin-transform-unicode-escapes@^7.12.13":
735751
version "7.12.13"
736752
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz#840ced3b816d3b5127dd1d12dcedc5dead1a5e74"
@@ -842,6 +858,15 @@
842858
"@babel/plugin-transform-react-jsx-development" "^7.12.12"
843859
"@babel/plugin-transform-react-pure-annotations" "^7.12.1"
844860

861+
"@babel/preset-typescript@^7.13.0":
862+
version "7.13.0"
863+
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz#ab107e5f050609d806fbb039bec553b33462c60a"
864+
integrity sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==
865+
dependencies:
866+
"@babel/helper-plugin-utils" "^7.13.0"
867+
"@babel/helper-validator-option" "^7.12.17"
868+
"@babel/plugin-transform-typescript" "^7.13.0"
869+
845870
"@babel/runtime-corejs3@^7.10.2":
846871
version "7.13.10"
847872
resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz"
@@ -939,19 +964,6 @@
939964
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
940965
integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
941966

942-
"@types/eslint@^7.2.6":
943-
version "7.2.7"
944-
resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.7.tgz#f7ef1cf0dceab0ae6f9a976a0a9af14ab1baca26"
945-
integrity sha512-EHXbc1z2GoQRqHaAT7+grxlTJ3WE2YNeD6jlpPoRc83cCoThRY+NUWjCUZaYmk51OICkPXn2hhphcWcWXgNW0Q==
946-
dependencies:
947-
"@types/estree" "*"
948-
"@types/json-schema" "*"
949-
950-
"@types/estree@*":
951-
version "0.0.46"
952-
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe"
953-
integrity sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
954-
955967
"@types/glob@^7.1.1":
956968
version "7.1.3"
957969
resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz"
@@ -965,7 +977,7 @@
965977
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
966978
integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
967979

968-
"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
980+
"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
969981
version "7.0.7"
970982
resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz"
971983
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
@@ -1512,11 +1524,6 @@ array.prototype.flatmap@^1.2.3:
15121524
es-abstract "^1.18.0-next.1"
15131525
function-bind "^1.1.1"
15141526

1515-
arrify@^2.0.1:
1516-
version "2.0.1"
1517-
resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
1518-
integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
1519-
15201527
asn1.js@^5.2.0:
15211528
version "5.4.1"
15221529
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz"
@@ -2709,7 +2716,7 @@ enhanced-resolve@^0.9.1:
27092716
memory-fs "^0.2.0"
27102717
tapable "^0.1.8"
27112718

2712-
enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.1, enhanced-resolve@^4.5.0:
2719+
enhanced-resolve@^4.1.1, enhanced-resolve@^4.5.0:
27132720
version "4.5.0"
27142721
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz"
27152722
integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
@@ -2943,17 +2950,6 @@ eslint-visitor-keys@^2.0.0:
29432950
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz"
29442951
integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
29452952

2946-
eslint-webpack-plugin@^2.5.2:
2947-
version "2.5.2"
2948-
resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.5.2.tgz#4ee17577d6392bf72048080a1678d6237183db81"
2949-
integrity sha512-ndD9chZ/kaGnjjx7taRg7c6FK/YKb29SSYzaLtPBIYLYJQmZtuKqtQbAvTS2ymiMQT6X0VW9vZIHK0KLstv93Q==
2950-
dependencies:
2951-
"@types/eslint" "^7.2.6"
2952-
arrify "^2.0.1"
2953-
jest-worker "^26.6.2"
2954-
micromatch "^4.0.2"
2955-
schema-utils "^3.0.0"
2956-
29572953
eslint@^7.21.0:
29582954
version "7.21.0"
29592955
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.21.0.tgz"
@@ -4210,7 +4206,7 @@ isobject@^3.0.0, isobject@^3.0.1:
42104206
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz"
42114207
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
42124208

4213-
jest-worker@^26.5.0, jest-worker@^26.6.2:
4209+
jest-worker@^26.5.0:
42144210
version "26.6.2"
42154211
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
42164212
integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
@@ -4564,7 +4560,7 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
45644560
snapdragon "^0.8.1"
45654561
to-regex "^3.0.2"
45664562

4567-
micromatch@^4.0.0, micromatch@^4.0.2:
4563+
micromatch@^4.0.2:
45684564
version "4.0.2"
45694565
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz"
45704566
integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
@@ -5848,7 +5844,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
58485844
resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
58495845
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
58505846

5851-
semver@^7.2.1, semver@^7.3.2, semver@^7.3.4:
5847+
semver@^7.2.1, semver@^7.3.2:
58525848
version "7.3.4"
58535849
resolved "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz"
58545850
integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
@@ -6518,17 +6514,6 @@ toidentifier@1.0.0:
65186514
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz"
65196515
integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
65206516

6521-
ts-loader@^8.0.17:
6522-
version "8.0.17"
6523-
resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.17.tgz#98f2ccff9130074f4079fd89b946b4c637b1f2fc"
6524-
integrity sha512-OeVfSshx6ot/TCxRwpBHQ/4lRzfgyTkvi7ghDVrLXOHzTbSK413ROgu/xNqM72i3AFeAIJgQy78FwSMKmOW68w==
6525-
dependencies:
6526-
chalk "^4.1.0"
6527-
enhanced-resolve "^4.0.0"
6528-
loader-utils "^2.0.0"
6529-
micromatch "^4.0.0"
6530-
semver "^7.3.4"
6531-
65326517
tsconfig-paths@^3.9.0:
65336518
version "3.9.0"
65346519
resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz"

0 commit comments

Comments
 (0)