? ?? ??? ?? vue.js ?? ???? ?? ??? ?????? ???????

vue.js ?? ????? ?? ??? ????? ?? ?? ?? ? ???? ??? ??? ????? ? ?????. ????? ???? ?? ?? ? ??? ? ?? ?????.

1. ?? ?? ?? : ?? ?? ???? ?? ????? ??????. ?? ?? ??? ??? ? --mode production ???? ???? ?? ? ? ???, ?? ?? ? ? ?? ???? ?? ???? ???????.
2. ???? ?? ??? : Vue Cli? ?? ???? ???? ?? ???? ? ?? ?????. ? ??? ???? ???? ?? ??? ?????. ES6 ?? ?? ??? ?? ???? ?? ???? ???? ???? ??? ?????? ??????.
3. ?? ????? ??? : ??? ?? ????? ? ???? CDN? ???? ???? ?? ??? ??? ????.
4. ??? ??? : Webp? ?? ?? ??? ??? ???? ??? ?? ???? ???????. image-webpack-loader ? ?? ???? ????? ????? ? ??? ? ? ????.
5. ??? ?? ?? ?? : ?? ?? ??? ?? ?? ??? ??? ?? ??? ???? ??? ?? ?????????.
6. ???? ?? CSS ?? : PurgecsS? ?? ??? ???? CSS ???? ???? ?? ???? ??????.
7. VUE ?? ?? ??? : vue.config.js ??? ???? ??? runtimeCompiler ? productionSourceMap ??? ???? ?? ?? ??? ?? ?? ??? ???????.

??? ??? ???? vue.js ?????? ??? ??? ????? ???? ??? ??? ? ????.

vue.js ?? ?????? ?? ??? ????? ?? ??? ??????

vue.js ?? ?????? ?? ??? ???? ?? ????? ????? ??? ???? ??? ?? ?? ??? ???????. ?? ?? ??? ??? ????.

1. ??? ?? ??? ????? : ? ????? ?? ??? ???? ?? ???? ??? ???? ? ??? ?? ??? ??????.
2. ??? ?? ?? : ?? ? ?? ??? ?????? ???? ?? ???? ?? ??? ??? ??????.
3. ?? ??? ??? : ?? ?????? ??? ???? ??????. ?????? ? ?? ??? ?? ??? ????? ? ??? ??? ?? ?? ??????.
4. ?? ?? : ?? ?? ??? ???? ?? ????? ??? ???? ? ??? ?? ??? ?????.
5. VUE ?? ??? ??????? : ?? ??? ??? ?? ?? ??? ?? ?? ?? VUE ?? ???? ???? ??? ????????.
6. ?? JavaScript ?? ?? : Tree Shaing? ????? ?? ??? ?? ??? ?? JavaScript ??? ???? ??? ??????.
7. ????? ?? ??? : npm ls ? ?? ??? ???? ???? ???? ???? ?? ??? ??????.

??? ?? ??? ??? vue.js ?? ????? ?? ??? ?? ????? ??? ??? ? ?? ??? ??? ?? ? ? ????.

Code Splitting? ???? Vue.js ?? ?? ??? ????? ??? ??????

?? ??? ??? ????? ? ??? ?? ??? ??? Vue.js ?? ????? ?? ??? ????? ??? ?????. vue.js?? ?? ??? ???? ??? ??? ????.

1. ?? ?? ?? ?? : ?? ???? ?? ?? ??? ???? ??? ?? ?????????. router/index.js ?? ??? ?? ??? ??? ? ????.

    <code class="javascript">const router = new VueRouter({ routes: [ { path: '/about', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] })</code>

   ?? ?? Webpack? About Component? ?? ??? ??? ???? ????, ?? /about Route? ??? ? ??????.

2. ?? ?? ?? ?? ?? : ?? ???? ?? ?? ?? ??? ?? ??? ?? ??? ??? ? ????.

    <code class="javascript">Vue.component('async-example', () => import('./AsyncComponent.vue'))</code>

   AsyncComponent.vue ? ??? ??? ???????.

3. ?? ?? ?? : WebPack? import() ??? ???? ??? ???? ?? ? ? ????. ?? ??:

    <code class="javascript">button.addEventListener('click', () => { import(/* webpackChunkName: "print" */ './print').then(module => { module.default() }) })</code>

   ??? ?? ? ?? print ????????.

4. ?? ?? ??? : splitChunks ? ?? WebPack? ??? ??? ???? ?? ?? ??? ??? ???????. vue.config.js ?? ??? ?? ?? ? ? ????.

    <code class="javascript">module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all' } } } }</code>

   ? ??? ?? ? ??? ??? ??? ?? ??? ???? ?? ?? ??? ?? ? ????.

?? ??? ????? ???? vue.js ?? ????? ?? ??? ?? ???? ? ????. ???? ??? ? ??? ?? ??????.

Vue.js ????? ?? ??? ???? ????? ? ????? ??? ??????

vue.js ????? ?? ??? ???? ????? ? ????? ? ?? ??? ????. ??? ?? ???? ? ? ?????.

1. Webpack Bundle Analyzer :? ??? ??? ????? ???? ? ??? ??? ?? ?? ??? ???? ??? ?????. vue.config.js ? ???? vue.js ????? ?? ? ? ????.

    <code class="javascript">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin() ] } }</code>

   ?? ??? ???? ? ???? ???? ???? ? ??? ??? ??? ?? ?? ?????.

2. ?? ? ??? :? ??? ???? ?? ?? ??? ???? ?? ??? ?? ?? ???? ??? ? ? ????. ?? ???? ???? ???? ? ?? ?????.
3. Bundlephobia : ????? ?? ???? ??? ???? Bundlephobia? ????? ????? ?? NPM ???? ??? ???? ? ????? ? ?? ?????.

4. PURGECSS :? ??? ?????? ???? ?? CSS? ???? ? ??? ? ???,? ??? ??? ??? ?? ?? ? ????. vue.js ?? ????? vue.config.js ? ???? ?? ? ? ????.

    <code class="javascript">const PurgecssPlugin = require('purgecss-webpack-plugin') const glob = require('glob-all') module.exports = { configureWebpack: { plugins: [ new PurgecssPlugin({ paths: glob.sync([ path.join(__dirname, './**/*.{vue,js,jsx,ts,tsx}'), path.join(__dirname, './public/index.html') ]) }) ] } }</code>

5. ?? ?? :? ??? ???? ??? ?? ??? ???? ?? ??? ???? ??? ?? ? ? ????. CI/CD ??? ??? ??? ????? ?? ? ? ????.

??? ??? ???? ??? ??? ?? ???? ?? ??? ??? ???? vue.js ????? ?? ??? ??????? ???? ??? ?? ? ? ????.

? ??? ? ?? ??? ?? vue.js ?? ???? ?? ??? ?????? ???????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!