CODEWITHSUNDEEP
webpackvue.js
Jordi Nebot
Jordi Nebot

Reputation: 3401

Bloated JS output with Webpack and Vue

I'm getting started with Vue's Single File Components. I created a simple Hello World which I bundle with Webpack (I'm also new to it) but I am really astonished by the bloated resulting file.

This is my component at src/js/components/app.vue:

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

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

and my src/js/index.js:

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

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

And this is my 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'
        }
    }
}

I use Vue 2.3.4 and Webpack 3.0.0. My resulting main.js file (which works fine) is >10.000 lines of code!

  1. Is this normal?
  2. Am I doing something wrong?
  3. Am I missing something?

Upvotes: 1

Views: 368

Answers (1)

craig_h
craig_h

Reputation: 32714

Yes. Remember it will also be bundling Vue itself, which unminified is 9685 lines of code.

It will also be doing a bunch of other magic to convert your ES2015 code to ES5 and creating a render function from your .vue template.

Upvotes: 1

Related Questions