npm 라이브러리 버전 올리기
이름 | 구 버전 | 현 버전 | |
---|---|---|---|
webpack | 3.8.0 | 4.44.2 | |
webpack-dev-server | 2.9.7 | 3.11.3 | |
webpack-cli | X | 3.3.0 | |
html-webpack-plugin | 2.30.1 | 3.2.0 | |
vue-loader | 13.3.0 | 14.2.2 | |
uglifyjs-webpack-plugin | 1.1.1 | X | |
extract-text-webpack-plugin | 3.0.2 | 4.0.0-beta.0 | |
@babel/core | X | 7.23.2 | |
@babel/preset-env | X | 7.23.2 | |
babel-loader | 7.1.1 | 8.2.5 | |
babel-core | 6.22.1 | X | |
babel-preset-env | 1.3.2 | X | |
compression-webpack-plugin | X | 4.0.1 웹팩버전과 맞춰야함 | |
compression | X | 1.7.4 serve.js 압축 사용 |
빌드 설정 변경
- webpack 3 에서 기존 제공되지 않았던 기능들을 플러그인으로 대체해 사용하였지만 webpack 4 에서는 기본 제공하는 기능이 되어 빌드설정 변경
- webpack.IgnorePlugin : 플러그인 중 필요한 모듈만 사용하고 사용하지 않는 모듈들은 빌드되지 않도록 하는 설정 ex) moment.js / locale
- vendor 에 모든 npm 이 다운로드 되어 초기렌더링 속도가 느림, 각각 패키지를 다운하도록 변경
- 난독화한(Uglify) 코드에 gzip(GNU zip) 알고리즘을 써서 더 압축 : js 파일을 .gz 파일로 압축하고 브라우저에서 .gz 파일을 열수 있도록 설정
// webpack.config.js
mode: "devlopment",
optimization: {
minimize: true, //UglifyJsPlugin 계승
runtimeChunk: 'single',
splitChunks : {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
concatenateModules: true, //ModuleConcatenationPlugin을 계승
},
plugin: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.scss$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
]
'WEBPACK' 카테고리의 다른 글
번들러(Bundler)란? (0) | 2024.03.05 |
---|---|
[Webpack] 빌드시 정적파일 복사 copy-webpack-plugin (1) | 2023.12.28 |
npm 라이브러리 버전 올리기
이름 | 구 버전 | 현 버전 | |
---|---|---|---|
webpack | 3.8.0 | 4.44.2 | |
webpack-dev-server | 2.9.7 | 3.11.3 | |
webpack-cli | X | 3.3.0 | |
html-webpack-plugin | 2.30.1 | 3.2.0 | |
vue-loader | 13.3.0 | 14.2.2 | |
uglifyjs-webpack-plugin | 1.1.1 | X | |
extract-text-webpack-plugin | 3.0.2 | 4.0.0-beta.0 | |
@babel/core | X | 7.23.2 | |
@babel/preset-env | X | 7.23.2 | |
babel-loader | 7.1.1 | 8.2.5 | |
babel-core | 6.22.1 | X | |
babel-preset-env | 1.3.2 | X | |
compression-webpack-plugin | X | 4.0.1 웹팩버전과 맞춰야함 | |
compression | X | 1.7.4 serve.js 압축 사용 |
빌드 설정 변경
- webpack 3 에서 기존 제공되지 않았던 기능들을 플러그인으로 대체해 사용하였지만 webpack 4 에서는 기본 제공하는 기능이 되어 빌드설정 변경
- webpack.IgnorePlugin : 플러그인 중 필요한 모듈만 사용하고 사용하지 않는 모듈들은 빌드되지 않도록 하는 설정 ex) moment.js / locale
- vendor 에 모든 npm 이 다운로드 되어 초기렌더링 속도가 느림, 각각 패키지를 다운하도록 변경
- 난독화한(Uglify) 코드에 gzip(GNU zip) 알고리즘을 써서 더 압축 : js 파일을 .gz 파일로 압축하고 브라우저에서 .gz 파일을 열수 있도록 설정
// webpack.config.js
mode: "devlopment",
optimization: {
minimize: true, //UglifyJsPlugin 계승
runtimeChunk: 'single',
splitChunks : {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
concatenateModules: true, //ModuleConcatenationPlugin을 계승
},
plugin: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.scss$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
]
'WEBPACK' 카테고리의 다른 글
번들러(Bundler)란? (0) | 2024.03.05 |
---|---|
[Webpack] 빌드시 정적파일 복사 copy-webpack-plugin (1) | 2023.12.28 |