next. js

When you view the page source of a Next.js app, you can see a bunch of JavaScript files being loaded:

当您查看Next.js应用程序的页面源代码时，您会看到一堆正在加载JavaScript文件：

Let’s start by putting the code in an to get it formatted better, so we humans can get a better chance at understanding it:

让我们开始将代码放入以使其格式更好，以便我们人类可以更好地了解它：

    
         
         
         
         
         
         
         
     
        
      
            
       
Home page
      
    
     
                        

We have 4 JavaScript files being declared to be preloaded in the head, using rel="preload" as="script":

我们使用rel="preload" as="script"将4个JavaScript文件声明为要在head rel="preload" as="script" ：

• /_next/static/development/pages/index.js (96 LOC)

  /_next/static/development/pages/index.js LOC)

• /_next/static/development/pages/_app.js (5900 LOC)

  /_next/static/development/pages/_app.js LOC)

• /_next/static/runtime/webpack.js (939 LOC)

  /_next/static/runtime/webpack.js LOC)

• /_next/static/runtime/main.js (12k LOC)

  /_next/static/runtime/main.js LOC)

This tells the browser to start loading those files as soon as possible, before the normal rendering flow starts. Without those, scripts would be loaded with an additional delay and this improves the page loading performance.

这告诉浏览器在正常渲染流程开始之前尽快开始加载这些文件。 没有这些脚本，脚本将被额外延迟加载，从而提高了页面加载性能。

Then those 4 files are loaded at the end of the body, along with /_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js (31k LOC), and a JSON snippet that sets some defaults for the page data:

然后将这4个文件以及/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js LOC)和一个设置了页面数据某些默认值的JSON片段一起加载到body的末尾：

The 4 bundle files loaded are already implementing one feature called code splitting. The index.js file provides the code needed for the index component, which serves the / route, and if we had more pages we’d have more bundles for each page, which will then only be loaded if needed - to provide a more performant load time for the page.

加载的4个捆绑包文件已经实现了一种称为代码拆分的功能。 index.js文件提供了index组件所需的代码(用于/路由)，如果我们有更多的页面，我们将为每个页面提供更多的包，然后仅在需要时才加载它们-以提供更高的性能页面的加载时间。

翻译自:

next. js