使用 Webpack 和 Vue 的臃肿 JS 输出答案

【问题标题】：Bloated JS output with Webpack and Vue使用 Webpack 和 Vue 的臃肿 JS 输出
【发布时间】：2017-07-13 10:35:49
【问题描述】：

我开始使用 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 行代码！

这正常吗？
我做错了吗？
我错过了什么吗？

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

是的。请记住，它还将捆绑Vue 本身，未缩小的是 9685 行代码。

它将您的 ES2015 代码转换为 ES5 并从您的 .vue 模板创建一个 render function 也会做很多其他的事情。

【讨论】：

触摸！很公平 :) 谢谢！