Laravel Mixでのextractとrequireの関係について

Question

前提として各ファイルが以下のようになっているとして、

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .extract([
    'jquery',
    'bootstrap',
    'axios',
])

app.js

/**
 * First, we will load all of this project's Javascript utilities and other
 * dependencies. Then, we will be ready to develop a robust and powerful
 * application frontend using useful Laravel and JavaScript libraries.
 */

require('./bootstrap');

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

• この場合、vendor.jsにextractされたJSがまとめられ、app.js側でもbootstrapなどがrequireされるわけですがこれって意味のあることでしょうか？
• 意味がないことをやっている場合、どのようなライブラリをextractすべきでしょうか。

結局app.js側でrequireするならextractする必要ないのかなと思うのですが、webpackの仕組みがよくわかっておらず教えていただきたいです。

Answer 1

extractされた分はapp.jsからも削除されてるので気にしなくていい。

extract()で指定したものだけをvendor.jsに分けてるのではなくもっと賢い動作してる。

Comments

[pafe.aratani]

確かにextractしないとapp.jsにaxiosのソースがありましたが、extractするとapp.jsにはbootstrap.jsの読み込んでいる箇所だけになりました。
extractしたほうがキャッシュが効きやすくなってよさそうです！！