Remove hmr socket code from prod build (#76232)

Follow up to https://github.com/vercel/next.js/pull/54078, we wouldn't
want HMR related code in production bundle. Relates to
https://github.com/vercel/next.js/issues/76198 but doesn't solve that
completely.

----
<table>
  <tr>
<td><img
src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/rKSEEwxbNzdFs9t0yyxN/5ed4dfeb-5bc6-4e14-a1e8-efef2d0e0066.png"
width="300"/></td>
<td><img
src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/rKSEEwxbNzdFs9t0yyxN/38e382b2-718d-4a09-b55a-6df8b4865614.png"
width="300"/></td>
  </tr>
  <tr>
<td colspan="2" style="text-align: center;">Size reduced from 122KB to
119KB for a trivial app router application.</td>
  </tr>
</table>

packages/next/src/client/index.tsx

@@ -47,7 +47,6 @@ import {
 } from '../shared/lib/hooks-client-context.shared-runtime'
 import { onRecoverableError } from './react-client-callbacks/on-recoverable-error'
 import tracer from './tracing/tracer'
-import reportToSocket from './tracing/report-to-socket'
 import { isNextRouterError } from './components/is-next-router-error'
 
 /// <reference types="react-dom/experimental" />
@@ -189,10 +188,13 @@ class Container extends React.Component<{
 export async function initialize(opts: { devClient?: any } = {}): Promise<{
   assetPrefix: string
 }> {
-  tracer.onSpanEnd(reportToSocket)
-
   // This makes sure this specific lines are removed in production
   if (process.env.NODE_ENV === 'development') {
+    tracer.onSpanEnd(
+      (
+        require('./tracing/report-to-socket') as typeof import('./tracing/report-to-socket')
+      ).default
+    )
     devClient = opts.devClient
   }