My app has a significant app.js
(6k lines, 9MB) that needs to be split up for efficiency and loaded in smaller chunks, when and where needed. What I'm attempting to do is load a second .js file only on some pages that uses components set in the first. For example:
<script src="/js/app.js?id=0ee4f7c5f4eaacfc778c"></script>
<script src="/js/sponsor.js?id=0ee4f7c5f4eaacfc778c"></script>
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/sponsor.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
.sourceMaps();
Using this approach sponsor.js
is about 600 lines long (even though my component is only ~100) and it looks like 500 of those lines are a bunch of webpack autoloading code. Technically this code already exists in the initial app.js
. How can I create a separate bundle of vue components for a different section of my app without duplicating the webpack autoloading?
from Autoloading code duplicated between files generated via webpack
No comments:
Post a Comment