์ ๋ ์นํฉ์ด ์ฒ์์
๋๋ค. ์ ๊ทธ๋ ๊ฒ ๋ฌด๊ฑฐ์ด bundle.js๋ฅผ ์ปดํ์ผํ๋์ง ์ดํดํ ์ ์์ต๋๋ค. ๊ฐ์ฅ ์์ ์์ ๋ผ๋ ์คํ ์ทจ์๊ฐ ํฌํจ๋ ํ ์ผ์ 1.9MB์
๋๋ค! ๋ ๋ณต์กํ ๋ค๋ฅธ ์์ ๊ฒฝ์ฐ ์ฝ 2.5MB์
๋๋ค. ํ์คํ ๊ตฌ์ฑ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๊ทธ๊ฑด ๊ทธ๋ ๊ณ ํ๋ฅญํ ์ผ :)
๊ทธ ์์ฒด๋ก๋ ์๋ฌด๋ฐ ๋ฌธ์ ๊ฐ ์์ผ๋ฉฐ ์์ ๋ ํ๋ก๋์ ์ฉ์ผ๋ก ๊ตฌ์ฑ๋์ง ์์์ ๋ฟ์ ๋๋ค. ์ ์ง ๊ด๋ฆฌ ๋ถ๋ด์ ํผํ๊ธฐ ์ํด ์ฌ๊ธฐ์์ ์ด ์์ ์ ์ํํ์ง ์์ ๊ฒ์ ๋๋ค. ํ๋ก๋์ ๊ตฌ์ฑ์ ์๋ ์ ์ฒด Webpack ์์ฉ๊ตฌ๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
์ต์ํ ํ๋ก๋์ ์์๋ ๋ค์๊ณผ ๊ฐ์ด ํ๊ณ ์ถ์ ๊ฒ์ ๋๋ค.
devtool
์ 'eval'
์์ 'source-map'
webpack.DefinePlugin
๋ฅผ ์ถ๊ฐํ์ฌ process.env.NODE_ENV
๋ฅผ 'production'
webpack.optimize.UglifyJsPlugin
์ถ๊ฐNODE_ENV=production
Babel์ ํธ์ถํ์ฌ .babelrc
๊ฐ react-transform
ํ์ฑํํ์ง ์๋๋ก ํ์ญ์์ค.์ผ๋ฐ์ ์ธ Webpack ํ๋ก๋์ ๊ตฌ์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}]
}
};
๊ด์ฌ์ด ์๋ ๊ฒฝ์ฐ ํ๋ก๋์ ๋ชจ๋๋ฅผ ํฌํจํ๋ ์์ฉ๊ตฌ ๊ฐ ์์ต๋๋ค.
๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ AsyncRoute์ ๋๋ค. ์ฌ๋ฌ ์์ฒญ์ ํผํ๊ธฐ ์ํด ๊ตฌ์ฑ ์์์ ํ ํ๋ฆฟ/css/js๋ฅผ ํจ๊ป ๋ฒ๋ค๋ก ์ ๊ณตํด์ผ ํ์ง๋ง ์์ฒญ ์ ๋ก๋ํด์ผ ํฉ๋๋ค.
๊ฐ๋ devtool
์ผ๋ก inline-source-map
๋์ ์ source-map
๋ํ ์์ค์ง๋ (๋๋ผ์ด) ์ธ๋ผ์ธ์ผ๋ก ๋ฐ๊พธ์ด ์ถ๋ ฅ ํ์ผ์ ์ผ๊ด ๊ฒ์
๋๋ค. ๋น์ฐํ์ง๋ง ๋๋ ์ด๊ฒ์ ๊ฐ๊ณผํ๊ณ ์์๋ด๋ ๋ฐ ํ ์๊ฐ์ด ๊ฑธ๋ ธ์ผ๋ฏ๋ก ์ผ๋ฐ์ ์ธ ๋ฏธ๋ ์ฐธ์กฐ๋ฅผ ์ํด ์ฌ๊ธฐ์ ๋ก๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ทธ ์์ฒด๋ก๋ ์๋ฌด๋ฐ ๋ฌธ์ ๊ฐ ์์ผ๋ฉฐ ์์ ๋ ํ๋ก๋์ ์ฉ์ผ๋ก ๊ตฌ์ฑ๋์ง ์์์ ๋ฟ์ ๋๋ค. ์ ์ง ๊ด๋ฆฌ ๋ถ๋ด์ ํผํ๊ธฐ ์ํด ์ฌ๊ธฐ์์ ์ด ์์ ์ ์ํํ์ง ์์ ๊ฒ์ ๋๋ค. ํ๋ก๋์ ๊ตฌ์ฑ์ ์๋ ์ ์ฒด Webpack ์์ฉ๊ตฌ๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
์ต์ํ ํ๋ก๋์ ์์๋ ๋ค์๊ณผ ๊ฐ์ด ํ๊ณ ์ถ์ ๊ฒ์ ๋๋ค.
devtool
์'eval'
์์'source-map'
webpack.DefinePlugin
๋ฅผ ์ถ๊ฐํ์ฌprocess.env.NODE_ENV
๋ฅผ'production'
webpack.optimize.UglifyJsPlugin
์ถ๊ฐNODE_ENV=production
Babel์ ํธ์ถํ์ฌ.babelrc
๊ฐreact-transform
ํ์ฑํํ์ง ์๋๋ก ํ์ญ์์ค.์ผ๋ฐ์ ์ธ Webpack ํ๋ก๋์ ๊ตฌ์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๊ด์ฌ์ด ์๋ ๊ฒฝ์ฐ ํ๋ก๋์ ๋ชจ๋๋ฅผ ํฌํจํ๋ ์์ฉ๊ตฌ ๊ฐ ์์ต๋๋ค.