vue.js - How does Laravel Elixir package files separately?

Question

The files packaged by mix.webpack('main.js') are too large. How to package dependency files and program files separately? Seek the guidance of the great God

Answer 1

Please refer to: Vendor Extraction introduction of Laravel Mix documentation: http://d.laravel-china.org/do...

One potential drawback of bundling your application's JavaScript with dependent libraries is that it makes long-term caching more difficult. For example, a separate update to the application code will force the browser to re-download all dependent libraries, even if they have not changed.

If you plan to frequently update your application's JavaScript, you should consider extracting all dependent libraries into separate files. This way, changes to the application code do not affect the cache of the vendor.js file. Mix’s extract method makes it easy:

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue'])

The

extract method accepts an array of all dependent libraries or modules you wish to extract into the vendor.js file. Using the above code snippet as an example, Mix will generate the following files:

• public/js/manifest.js: Webpack display runtime

• public/js/vendor.js: dependent library

• public/js/app.js: application code

To avoid JavaScript errors, be sure to load these files in the correct order:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>