WebpackとVueでBloated JS出力

Question

私はVueのSingle File Componentsを使い始めています。私はウェブパックと一緒にバンドルした簡単なHello Worldを作成しましたが、私は本当に膨大な結果ファイルに驚いています。

これはsrc/js/components/app.vueでの私のコンポーネントです：

<template> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      message: 'Hello World!', 
     } 
    } 
} 
</script> 

と私のsrc/js/index.js：

import Vue from 'vue'; 
import App from './components/app.vue'; 

new Vue({ 
    el: '#app', 
    components: { App } 
}); 

そして、これが私のwebpack.config.babel.jsです：

import path from 'path'; 

module.exports = { 
    entry: path.resolve(__dirname, 'src') + '/js/index.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'main.js', 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: { 
        loaders: { 
         scss: 'vue-style-loader!css-loader!sass-loader', 
        } 
       } 
      } 
     ], 
    }, 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js' 
     } 
    } 
} 

私はVueの2.3.4とWebPACKのを使用3.0.0。私の結果のmain.jsファイル（正常に動作します）は10.000行以上です！

1. これは正常ですか？
2. 何か間違っていますか？
3. 何か不足していますか？

Answer 1

はい。 Vue自体もバンドルされていることを覚えておいてください。

ES2015コードをES5に変換し、.vueテンプレートからrender functionを作成することも、他の魔法のようになります。