Hello everyone,
I'm currently doing front-end optimization for a project and I'm stuck with code splitting..
basically what I'm trying to achieve is splitting code and vendors and load specific ones only when needed.
Currently, I use the default mix setup and all the dependencies are imported into app.js. So I need to include app.js on every page, which is very inefficient because in my project, most of the pages don’t use vue and I used some REAL big vue plugins on some of the pages that utilises vue...
For instance, say I have two pages: /home and /orders. Instead of loading app.js on every page, I'd like have:
/home (most pages look like this)
vendor.js: jquery + bootstrap + jquery pluginshome.js: initializes some jquery plugins (e.g. carousels) on the page/orders
vendor.js
vue.js: I'd like to extract vue because I have multiple entry points
order-index.js: registers page specific vue component and creates vue instance
// order-index.js
Vue.component('order-index', require('./components/OrderIndex.vue'));
const app = new Vue({
el: '#app'
});
How can I achieve that? Or do you guys have any better suggestions?
Thanks!
Do try, in your webpack.mix.js
mix.js('resources/js/vendor.js', 'public/js').js('resources/js/home.js', 'public/js').js('resources/js/order-index.js', 'public/js')
not sure if can split Vue out the order-index.js
Do keep this thread updated. Interested in knowing how you got around it.
@MUSHOOD - I'm thinking compiling vendor.js and jquery code separately (so that they don't depend on manifest.js).
mix.js('resources/js/vendor.js', 'public/js')
.js('resources/js/home.js', 'public/js');
Then:
mix.js('resources/js/order-index.js', 'public/js')
.js('resources/js/another-page.js', 'public/js')
...
.extract(['vue'], 'public/js/vue');
The output will be:
/js/manifest.js
/js/vue.js
/js/order-index.js
/js/another-page.js
...
At last, include what I need on specific pages:
@section('script')
<script src="/js/manifest.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/order-index.js"></script>
@endsection
Pretty ugly... but it's the only solution I can think of right now
this looks right.
Also its not ugly. Its what is required in your specific case and a quite clean way at that.
Please or to participate in this conversation.