bed's avatar
bed
OP
7 years ago
Level 1

How to reduce app.js size in laravel-mix

My bootstrap.js just load a lodash.

window._ = require('lodash');

My app.js is

require('./bootstrap');

window.Vue = require('vue');

import { Modal } from 'bootstrap-vue/es/components';
Vue.use(Modal);

const app = new Vue({
    el: '#app'
});

There is just a one Modal plugin import from bootstrap-vue, Now my app.js size in production is 355kb, I think this is big. How can I reduce this size ?

0 likes
2 replies
D9705996's avatar

If you want to use this module there isn't a lot you can do to reduce the size as you are already only pulling in the module you need. However you can look at laravel-mix and vendor extraction

https://laravel.com/docs/5.7/mix#working-with-scripts

If you extract you vendor modules from your application JavaScript you can leverage client side caching. This would mean that clients would only download your large vendor assets once, reducing latency.

The mix helper will take care of cache busting for you in your HTML / Blade files if you update the modules.

Please or to participate in this conversation.