why is my app.js compiled file so big ?

i just finally completed a project, i have been working on using vue , laravel and elixir, but after running "gulp --production" the file size is about 600kb. what have i done wrong or what did i do wrong ? these are all the components i am using :

        require('./bootstrap');
      import moment from 'moment' ;
    import analyticsgraph from './components/home/analyticsgraph.vue' ;
    import ParrallelMarketRates from './components/home/ParallelMarketRates.vue';
    import Rates from './components/home/Rates.vue';
    import BankRates from './components/home/BankRates.vue';
    import RatesCalculator from './components/home/RatesCalculator.vue';
     import News from './components/home/News.vue';
     import {url} from './components/utilities/settings';
     import { default as swal } from 'sweetalert2'

    Vue.component('analyticsgraph', analyticsgraph);
    Vue.component('parrallelmarketrates', ParrallelMarketRates);
     Vue.component('WesternUnion', Rates);
       Vue.component('Cbn', Rates);
      Vue.component('Bdc', Rates);
        Vue.component('BankRates', BankRates);
        Vue.component('RatesCalculator', RatesCalculator);
       Vue.component('news', News);

also all my vue components and files are all below 8kb

marthz

8 years ago

Level 17

You can use something like this to see the size of each library :

https://chrisbateman.github.io/webpack-visualizer/

For example, if you didn't do anything to prevent that, moment will load all the internationalization files and be pretty huge.

Edit : duh i just realised you might not be using webpack in your build, but there probably are similar tools for what you're using

mazinoukah

8 years ago

Level 4

@marthz i am using webpack for laravel elixir , laravel 5.3

marthz

8 years ago

Level 17

Well great the you can use webpack visualizer, I'm not too sure where you'll put the "--json > stats.json" with elixir. For mix I just had to copy paste the "npm run production" line and add it there but I've never used elixir

afraz

6 years ago

Level 3

You need to load the components asynchronously

Webpack has an awesome feature to create chunks of code. The key to this is to use async components. These components get loaded completely asynchronously whenever the component is present on the page you just loaded.

Let's do it.

In resources/js/app.js

I changed

Vue.component('jobs', require('./pages/employer/jobs/Index.vue').default);

Vue.component('jobs', () => import('./pages/employer/jobs/Index.vue'));

and in webpack.mix.js

mix.webpackConfig({
    output:{
        chunkFilename:'js/vuejs_code_split/[name].js',
    }
});

Now by running npm run watch or prod each component file is saved public/js/vuejs_code_split/[name].js And the main app.js is automatically calling those components when required.

7 likes

Please or to participate in this conversation.