與Webpack和Vue的膨脹JS輸出

Question

我開始使用Vue的Single File Components。我創建了一個簡單的Hello World，我與Webpack捆綁在一起（我對它也很陌生），但是我真的對這個臃腫的結果文件感到驚訝。

這是我在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本身，其中unminified是9685行代碼。

它也會做一堆其他魔法，將ES2015代碼轉換爲ES5，並從.vue模板創建render function。