Preconnect establishes a connection to a server. This process includes DNS resolution, as well as establishing the TCP connection, and performing the TLS handshake—if a site is served over HTTPS.
If a page needs to make connections to many third-party domains, preconnecting them all is counterproductive. The preconnect hint is best used for only the most critical connections.
The main difference between dns-prefetch vs preconnect is that, preconnect initializes an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation. Dns-prefetch just for DNS lookups.