๐ ๋ชฉ์ฐจ
- ์์ฝ
- ์๋ก
- vite๋?
- vite ํ์ฌ ํ๋ก์ ํธ ์ ์ฉํ๊ธฐ
- ๊ฒฐ๋ก
๐ ์์ฝ
| ๊ธฐ์กด | vite ์ ์ฉํ | |
|---|---|---|
| build time | 34897ms | 548ms |
| re-build time | 3310ms | 100ms ์ดํ |
๐ ์๋ก
๊ฐ์ธ ํ๋ก์ ํธ์์ vite๋ฅผ ์ฌ์ฉํ๋ฉด์ ๋๊ผ๋ ์ฅ์ ๋ค์ ํ ๋๋ก ํ์ฌ ํ๋ก์ ํธ์ ์ ์ฉ์ ํด๋ณด์์ต๋๋ค. ๊ธฐ์กด์ ์๋ ํ๋ก์ ํธ๋ฅผ vite๋ฅผ ์ ์ฉ ํ๋ฉด์ ํ๋ค์๋ ์ ๋ค๊ณผ ๊ทธ๊ฒ์ ์ด๋ป๊ฒ ํด๊ฒฐํ๋์ง๋ฅผ ๊ธฐ์ ์ ํ๋ ๊ธ ์ ๋๋ค.
๊ทธ๋ผ ์ฌ๋ฐ๊ฒ ์ฝ์ด์ฃผ์ธ์! ๐
๐ vite ๋?
๋จผ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ vite๊ฐ ์์ํ์ค๊ฑฐ ๊ฐ์ ๊ฐ๋ตํ๊ฒ vite์ ๋ํด ์ค๋ช ํด๋ณด๊ฒ ์ต๋๋ค.
vite๋ ๋ฐ์ดํธ ๋ผ๊ณ ์ฝ์ง ์๊ณ ๋น์๋ผ๊ณ ์ฝ์ด์ผ ํ๋ต๋๋ค. (๋น ๋ฅด๋ค๋ ๋ป์ ๋ถ์ด๋ผ์ ์ด๋ ๊ฒ ์ฝ์ด์ผํฉ๋๋ค.)
๊ทธ๋ฆฌ๊ณ vite๋ ๊ธฐ์กด webpack, rollup, parcel ๊ณผ ๊ฐ์ bundler ๋ผ๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค.
๋ค๋ฅธ ํด๊ณผ๋ ๋ค๋ฅด๊ฒ ํจ์ฌ ๋ ๋น ๋ฅด๊ฒ server๋ฅผ ์์ํ๊ณ hot-module-replacement๊ฐ ๋น ๋ฆ
๋๋ค. ์๊ทธ๋ด๊น์?
vite๊ฐ ์ฌํ ๋ค๋ฅธ ํด๋ณด๋ค ๋น ๋ฅธ ์ด์
vite๊ฐ ๋น ๋ฅธ ๊ฐ์ฅ ํฐ ์ด์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ES modules๋ฅผ ์ง์ํจ์ ๋ฐ๋ผ์ ์ผ๋ฐ์ ์ธ ๋ฒ๋ค๋ง ๊ณผ์ ์ ์๋ตํ๊ฒ ๋์ด ๊ทธ๋ ์ต๋๋ค.
๊ธฐ์กด:
ES module๋ฅผ ํ์ฉํ ๋ฐฉ๋ฒ:
๊ทธ๋ฆผ์ ๋ณด์๋ฉด ๊ธฐ์กด์๋ ๋ชจ๋ ํ์ผ์ ๋ฒ๋ค๋ง์ ํ ํ์๋ ์๋ฒ๊ฐ ์์์ด ๋ฉ๋๋ค. ํ์ง๋ง ๋ณ๊ฒฝ๋ ๋ฐฉ๋ฒ์ ์๋ฒ๋ง ์์ํ ๋ค์๋ ํ์ผ์ด ๋จ์ด์ง๋๋ค. ๊ทธ๋์ ํจ์ฌ ๋น ๋ฅธ dev-server๊ฐ ๊ฐ๋ฅํ๊ฒ ๋ฉ๋๋ค.
๐ vite ํ์ฌ ํ๋ก์ ํธ ์ ์ฉํ๊ธฐ
ํ์ฌ ํ๋ก์ ํธ์ ์ ์ฉํ๊ธฐ์ ์์ ํ์ฌ ํ๋ก์ ํธ์ ๋ํด ์ค๋ช ์ ํ์๋ฉด ์ผ๋ฐ์ ์ธ vue framework ๋ mono-repo์๋ ์กฐ๊ธ ๋ค๋ฅด๊ฒ ํ๊ฒฝ์ด ์ค์ ์ด ๋์ด์์ต๋๋ค.
- vue๋ฅผ ์ฌ์ฉํ๊ธด ํ์ง๋ง vue๋ฅผ ํตํ์ฌ ssr์ด ๊ฐ๋ฅํ๊ฒ ๋๋ ํํ๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
- mono-repo์ ํ์์ ๊ฐ์ง๊ณ ์์ง๋ง ์ค์ ๋ก๋ ๋ถ๋ฆฌ ๋์ด์๋ shared ํด๋๋ฅผ ๋ณต์ฌํด์ ๊ฐ์ ธ์จ ๋ค ํน์ alias๋ก ํ๋ก์ ํธ๊ฐ ์คํ๋๊ฒ ๋ฉ๋๋ค.
์ด์ ๋ฐ๋ผ ์ด๋ ค์ ๋ ์ ๋ค๊ณผ ์ ์ฉ ๋ฐฉํฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- build๋ webpack์ ์ฌ์ฉํ์ง๋ง dev-server๋ vite๋ฅผ ์ฌ์ฉํ ๊ฒ
- env.local ํ์ผ ๊ด๋ฆฌ
- dynamic import
- .vue ์ต์คํ ์ ์ฒ๋ฆฌ
- import.meta ์ฒ๋ฆฌ
- hmr ์ฒ๋ฆฌ
๊ทธ๋ผ ์ด์ ๊ฐ ํญ๋ชฉ์ ์์ธํ๊ฒ ์ดํด๋ณผ๊น์?
1. build๋ webpack์ ์ฌ์ฉํ์ง๋ง dev-server๋ vite๋ฅผ ์ฌ์ฉํ ๊ฒ
์ ๊ตณ์ด ๋๊ฐ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ๋ฌผ์ผ์ ๋ค๋ฉด ์์ ๋ง์ ๋๋ ธ๋ ํ์ฌ ํ๋ก์ ํธ์ ํน์์ฑ๋๋ฌธ์ ๊ทธ๋ ์ต๋๋ค. ssr๋ฅผ ์ง์ํด์ผํ๋๋ฐ vite์ ssr์ง์์ด ์์ง experimetal ๋จ๊ณ์ด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ์ต๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ vue.confie.js๋ฅผ ๊ทธ๋ฅ ๋๋ ์ํ์์ vite.config.js๋ฅผ ๋ง๋ค๊ฒ ๋์์ต๋๋ค.
๊ทธ๋์ ๊ธฐ์กด vue.config.js๊ฐ ํ๋ ๋ฐฉํฅ๊ณผ ๋์ผํ๊ฒ vite.config.js๋ฅผ ์ค์ ํด์ฃผ์์ง๋ง ๋ช๊ฐ์ง ์ธํ ์ ๋ํด์ฃผ์ด์ผ ํ์ต๋๋ค.
export default defineConfig(({ mode, command }) => {
return {
define: {
// ๋ก์ปฌ์์๋ง vite๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ssr์ ํ ํ์๊ฐ ์์์ ๋ฐ๋ผ ํด๋น ๋ณ์๋ฅผ false๋ก ํด์ค
'TARGET_NODE': false,
// webpack์ hot-reloaded๋ฅผ ์ฌ์ฉํ๊ณ ์๊ธฐ๋๋ฌธ์ ํด๋น ๋ณ์๋ฅผ ๋น object๋ก ์ค์
'module': {}
},
};
});2. env.local ํ์ผ ๊ด๋ฆฌ
vite์ default mode๋ development ์
๋๋ค. ๊ทธ๋ฆฌ๊ณ local์ ๋งํ์ ธ ์์ต๋๋ค.(+ ์๋์ ์ผ๋ก .env.local ํ์ผ์ด ์ถ๊ฐ ๋ฉ๋๋ค.)
.env.local์ด ์ด๋ฏธ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ํด๋น mode๋ฅผ local๋ก ํด์ฃผ์ด์ผํ์ง๋ง ๋งํ์ ธ ์๋ ์ํฉ์ด๋ผ ํด๊ฒฐํด์ผ๋ง ํ์ต๋๋ค.
์๊ฐํ ๋ฐฉ๋ฒ์ ๋๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์์ต๋๋ค.
- vite ์ ์ฉ .env.local ๊ฐ์ ํ์ผ์ ๋ง๋ฌ(ex> .env.viteLocal, --mode=viteLocal)
- mode๋ฅผ ์ด์ํ๊ฒ ์ฃผ์ด์ .env.local ํ์ผ๋ง ์๋ ์ํฌํธ๋ฅผ ํ๊ฒ ํจ
1๋ฒ ๋ฐฉ๋ฒ์ ์ด๋ฏธ .env ํ์ผ์ด 5๊ฐ(.env, .env.local, .env.development, .env.stage, .env.production)๋ ์๋ ์ํฉ ์ด์๊ณ .env.local์ ๋ณ๊ฒฝํ๋ค๋ฉด .env.viteLocal๋ ๋ณ๊ฒฝ์ ํด์ฃผ์ด์ผํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์์ด์ 2๋ฒ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐ์ ํ์์ต๋๋ค.
๋ฐ๋ผ์ ์ต์ข ์ ์ผ๋ก ์ด๋ฐ ๋ช ๋ น์ด๊ฐ ํ์ํ๊ฒ ๋ฉ๋๋ค.
vite --mode eddie_is_the_best3. router dynamic import
๋ณดํต router์ dynamic import๋ฅผ ํ ๋ ์ด๋ฐ์์ factory ํจ์๋ก ๋ง์ด ์๋๋ค.
const view = path => () => import(/* webpackChunkName: "arena" */ `@/views/pages/arena/${path}`);ํ์ง๋ง ์ด๊ฒฝ์ฐ alias๊ฐ ์ด๋ฏธ ๋ถ์ด ์๊ธฐ ์ ์ด๋ผ @๋ฅผ ์ฝ์์๊ฐ ์์ต๋๋ค. ์ด์ ๋ฐ๋ผ ์ด๋ ๊ฒ ๋ณ๊ฒฝ์ ํด์ฃผ์์ต๋๋ค.
const view = path => () => import(/* webpackChunkName: "arena" */ `../views/pages/arena/${path}.vue`);4. .vue ์ต์คํ ์ ์ฒ๋ฆฌ
์ด๋ถ๋ถ์ด ๊ฐ์ฅ ๊ฑธ๋ ธ๋๊ฑฐ ๊ฐ์์. vite์์๋ ์ด์ extension์ ์ง์ ์ ๋ ฅํ๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ์ด ๋ฉ๋๋ค. .js์ธ์ ๋ชจ๋ ํ์ผ๋ค์ import ํ ๋ ์ด์ extension์ ๋ถ์ฌ ์ค์ผํฉ๋๋ค. (ex> .vue)
์๋ถ์ฌ ์ฃผ๋ฉด ์ด๋ ๊ฒ ๋ชป์ฐพ๋ ๋ค๋ ์๋ฌ๊ฐ ๋น๋๋ค.
๊ทธ๋์ ์ฒ์์๋ ๊ทธ๋ฅ ์๋์ ์ผ๋ก ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ํํ์์ต๋๋ค. ํ์ง๋ง ์ด๋ด ์ด๋ฐ๊ธ์ ๋ณด๊ฒ ๋ฉ๋๋ค.
๊ทธ๋ ์ต๋๋ค. ์๋์ผ๋ก extension์ ๋ถ์ฌ์ฃผ๋๊ฒ legacy๋ก ๋จ๊ฒ ๋ ๊ฒ์ด๊ณ ๋๊ตฐ๊ฐ๋ ์ด legacy๋ฅผ ํด๊ฒฐํด์ผ ํ๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
๊ทธ๋์ ๊ทธ๋ฅ ๋ถ์ฌ์ค์ผํ๋ค๊ณ ํ๋จ์ด ๋ค์์ต๋๋ค.
๋ค ๊ทธ๋ ์ต๋๋ค. ๋ ธ๊ฐ๋ค๋ฅผ ํ์ต๋๋ค.(์ฝ 2000๊ฐ์ ํ์ผ๋ค ๋ชจ๋ ์ฐพ์๋ค๋๋ฉด์ ๋ถ์ฌ์คฌ์ต๋๋ค. ๐ญ) ์ฒ์์ ์ธํ ๋ฆฌ์ ์ด์ ํ์ผ๋ก ์ ๊ท์์ผ๋ก ํ๋ฒ์ ๋ถ์ฌ๋ณด๋ ค๊ณ ํ์ง๋ง .js ์ธ์ง ๋ค๋ฅธ extension์ธ์ง ํ๋จ์ ํ ์๊ฐ ์์ด ์ง์ ๋ถ์ฌ์คฌ์ต๋๋ค.
5. import.meta ์ฒ๋ฆฌ
vite๋ import.meta์ ๊ดํ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ์ง๋ง webpack์ ๊ฐ๋ฅํ์ง ์์ต๋๋ค. ๋๋ฌธ์ webpack loader๋ฅผ ์ถ๊ฐ ์์ผ์ฃผ์์ต๋๋ค.
import.meta ์ฒ๋ฆฌ๊ฐ production ๋ชจ๋ ์ผ ๋ ๋น๋๊ฐ ์คํจํ์ฌ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ ํ์์ต๋๋ค.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="module" src="/src/vite-hmr.js"></script> // ์ฝ์
!
</body>
</html>๐ง ํด๋น htmlํ์ผ์ vite ์ ์ฉ์ด๊ธฐ ๋๋ฌธ์ webpack ์ผ๋๋ ์ ๊ทผ์ ํ์ง ์์ต๋๋ค.
vite-hmr.js๋ ์๋์์ ์ค๋ช ํ๊ฒ ์ต๋๋ค.๐
6. hmr ์ฒ๋ฆฌ
๊ธฐ์กด์ asyncData๋ webpack.module.hot์์ ์ ํธ๋ฅผ ๋ฐ์ ์ฒ๋ฆฌ๋ฅผ ํด์์ต๋๋ค.
if (process.env.NODE_ENV === 'development' && module && module['hot']) {
/** @type {{ addStatusHandler: (callback) => void }} */
const hot = module['hot'];
hot.addStatusHandler(status => {
if (status === 'idle') {
Vue.nextTick(async () => {
// ... ์ฌ๊ธฐ์ asyncData ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ๊ณ ์์
}
});
}
});
}๋์ผํ๊ฒ vite์ hmr๋ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํ์ต๋๋ค.
ํ์ง๋ง ํด๋น ์ฒ๋ฆฌ๋ vite:beforeUpdate ์ดํ์ฌ์ผ ํ๊ธฐ ๋๋ฌธ์ plugin์ ํ๋ ๋ง๋ค์ด ์ฃผ์์ต๋๋ค.
import { HmrContext } from 'vite';
const customHmrHandler = () => ({
name: 'customHmrHandler',
/**
* @param {HmrContext} obj
*/
handleHotUpdate({ server }) {
setTimeout(() => {
server.ws.send({
type: 'custom',
event: 'deferred-updated',
data: {}
});
}, 250);
},
});
export default customHmrHandler;์ด์ ์ด๊ฑธ vite.config.js์ ์ฐ๊ฒฐ ์์ผ๋์์ต๋๋ค.
import customHmrHandler from '../../shared/vitePlugins/customHmrHandler';
export default defineConfig(({ mode, command }) => {
return {
plugins: [customHmrHandler()]
}
}๊ทธ๋ฆฌ๊ณ ์ด์ ์ ํธ๋ง ๋ฐ์ผ๋ฉด ๋ฉ๋๋ค.
// vite-hmr.js
if (import.meta.hot) {
import.meta.hot.on('deferred-updated', () => {
Vue.nextTick(async () => {
// ... ์ฌ๊ธฐ์ asyncData ์ฒ๋ฆฌ
}
});
});
}์ด๋ถ๋ถ์ ์ถํ์ ๋ค์ ๊ณ ๋ฏผ์ ํด๋ด์ผ ํ ๊ฑฐ ๊ฐ์ต๋๋ค. ์ผ๋จ ๊ณ์ ์ฐพ์๋ณด๊ณ ์ฝ๋๋ ์ด์ฌํ ์ฐพ์๋ดค๋๋ฐ after updated๋ฅผ ๋ฐ์ ์ ์๋ event๊ฐ ์์์ต๋๋ค. ๊ทธ๋์ ์ผ๋จ vite.js์ issue๋ก ํด๋น ๊ธฐ๋ฅ์ ๊ตฌํ์์ฒญ์ ํด๋์ ์ํ์ ๋๋ค. ํด๋น ISSUE ๋ฐ๋ก๊ฐ๊ธฐ
๐ ๊ฒฐ๋ก
์ด์ ํจ์ฌ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ์ ํ ์ ์๊ฒ ๋์์ต๋๋ค.
| ๊ธฐ์กด | vite ์ ์ฉํ | |
|---|---|---|
| build time | 34897ms | 548ms |
| re-build time | 3310ms | 100ms ์ดํ |
๊ธฐ์กด ์ฝ๋๋ ๋ฆฌ๋ด์ผ์ ํ๋ฒ ํด์ ๋ง์ด ๋น๋ ํ์์ ๋ฎ์ถ ์ํ์์ง๋ง ์ด๊ฒ์ผ๋ก ๋ง์กฑ์ ํ ์ ์์์ต๋๋ค.
์ ๋ ์กฐ๊ธ์ ๊ธฐ๋ค๋ฆผ์ด ์๋ ๊ทธ๋ฐ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ถ๊ตฌํฉ๋๋ค.
์ด ๋ฌธ์ ๋ ์์ฐ์ฑ๊ณผ ์ง์ ์ ์ธ ์ฐ๊ด์ด ์๋ ๋ฌธ์ ๋ผ ๊ผญ ํด๊ฒฐ์ ํ๊ณ ์ถ์๊ณ vite๋ก ํด๊ฒฐ์ ํด๋ณด์์ต๋๋ค.
๊ทธ๋ผ ๊ธด๊ธ ์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๐๐ปโ๏ธ
'Vue Study' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Vue์์ modal ๊ด๋ฆฌ ์ฝ๊ฒํ๊ธฐ (3) | 2022.07.08 |
|---|---|
| Vue2 ClientOnly ์ปดํฌ๋ํธ ์ ์๊ธฐ (0) | 2021.07.29 |
| Vue2 ๋น๋ ํ์ ์ต์ ํ (0) | 2021.07.29 |
| Vue3 - v model (0) | 2020.11.08 |
| Vue3 - teleport (0) | 2020.11.08 |
