Monday 25 February 2019

Autoloading code duplicated between files generated via webpack

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