Is it a good practices to separate JS file based on pages?

For example, there are three different pages in my website which will use different js code and some common js code.

Is it a good practices to separate these js code into different files?

For example, in A.html:

<script src="/js/common.js"></script>
<script src="/js/pageA.js"></script>

in B.html:

<script src="/js/common.js"></script>
<script src="/js/pageB.js"></script>

So, when I access page A, page B related js will not be loaded, so it will be more quick I think? Am I thinking too much? its not necessary?

Or should I just put all js in one js file?

For example, in every html file:

<script src="/js/main.js"></script>

Normally which way do people do ?