Webpacker: JavaScript bundles being produced with Vue.js are pretty big

[supermoosefgc]

I have a single entry point under javascript/packs/admin/auth.js in my app as such:

import Vue from 'vue'
import VueResource from 'vue-resource';
import LoginFrom from 'admin/auth/comp/login-form.vue';

Vue.use(VueResource);

document.addEventListener('DOMContentLoaded', () => {
    const app = new Vue({
        el: '#login-root',
        render(createElement){
            return createElement(LoginForm);
        }
    });
})

Login-form.vue looks like this:

<template>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3>Admin Login</h3>
            <div class="panel">
                <div class="panel-body">
                    <div class="form-field">
                        <label class="field-label">Username</label>
                        <input type="text" class="field-control" v-model="username">
                    </div>
                    <div class="form-field">
                        <label class="field-label">Password</label>
                        <input type="password" class="field-control" v-model="password">
                    </div>
                </div>
                <div class="panel-footer">
                    <button class="btn-default" @click.prevent="submitLogin">Submit</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default 
{
    data()
    {
        return { 
            username: '',
            password: ''
        }
    },

    methods: {
        submitLogin()
        {

        }
    }
}
</script>

For some reason the development bundle produced is 1.5mb! The uglified file produced by webpacker's assets:precompile hook is still 540kb, much too large for a file that is only going to be used on a login screen.

Is webpacker appending a bunch of modules to the package that i am not aware of or is something else going on? I have a similar project at my fulltime job that is not rails based with MUCH more javascript code and it produces un-uglified bundles under 600kb

[ytbryan]

probably yes.

The default webpacker:install installs

puts "Installing all JavaScript dependencies"
run "yarn add @rails/webpacker"

puts "Installing dev server for live reloading"
run "yarn add --dev webpack-dev-server"

which has the following dependencies

"dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "coffee-loader": "^0.8.0",
    "coffeescript": "^1.12.7",
    "compression-webpack-plugin": "^1.0.0",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "js-yaml": "^3.9.1",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.5",
    "rails-erb-loader": "^5.2.1",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-manifest-plugin": "^1.3.1"
  },

so, if you don't use coffeescript, you may yarn remove coffeescript

The webpacker:install:vue installs these

run "yarn add vue vue-loader vue-template-compiler"

So you probably need to yarn remove some packages from @rails/webpacker that Vue dev don't use. Do share what you remove so that the others may benefit:) Thank you!

[gauravtiwari]

@ytbryan No, don't think those dependencies should directly affect the bundle size since they are being used for compiling a bundle and not used inside the code. Probably it's this:

import Vue from 'vue'
import VueResource from 'vue-resource';

[ytbryan]

@gauravtiwari I see.
@robotbebop Actually vue-resource has been retired https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

Do you also use vue-resource in other non-rails project? Don't think we can know what's the problem without comparing with the other project

[gauravtiwari]

Also note, webpack is going to include some boilerplate code in development for hot/live reloading, inline-styles and such. If you are concerned you can use common chunk to split webpack manifest and vendor files and it will reduce the main bundle size.

[supermoosefgc]

1. I actually did remove a few of those dependencies listed above, specifically the ones involving the Webpack CSS loaders since I am just using the plain SASS asset pipeline features in Rails; This cut the size of the bundles in half but they are still quite large, so it is definitely something the rails webpacker extension is tacking on to them and not webpack itself since, like i stated before, i am using webpack on another project and it is not producing bundles this large despite having a fairly large code base. (The current actual code in the rails project i am using is less than 200 lines since i have just started on it)

2. Vue-resource is _not retired at all_, it is in fact in at least semi-active development. That link you posted above is actually just stating that vue-resource is no longer part of the official Vue.js ecosystem, since they want to reduce the scope of what Vue.js is meant to accomplish and felt that AJAX was spreading their resources too thin.

[gauravtiwari]

Webpack normal build: ./bin/webpack with HMR on:

Webpack dev server build: ./bin/webpack-dev-server with HMR on:

Webpack normal build: ./bin/webpack with HMR off:

Webpack normal build: ./bin/webpack with eval sourcemap:

Please note that none of these above builds are built in production mode.

Here is a gist of the bundle: https://gist.github.com/gauravtiwari/a36217e29e176cd0b693095d0bc4d8f4