JavaScript Next.js减少JavaScript文件大小

Next.js 是一个基于React的框架，通过优化JavaScript捆绑包来帮助构建可扩展的Web应用程序以提高性能。代码分割将大型JavaScript文件拆分为较小的模块，使开发人员只需加载特定页面或功能所需的代码，从而通过减少浏览器需要处理的数据量来提高性能。

Next.js 提供了内置的代码分割功能，使开发人员能够轻松地按需拆分和加载较小的代码部分。这可以增强应用程序的速度和用户响应性，尤其在较慢的网络和较老的设备上，从而提供更好的用户体验。

先决条件：

Next.js简介
Next.js动态导入

创建下一个应用程序的步骤：

步骤1： 使用以下命令创建下一个应用程序

npx create-next-app code-splitting

步骤2： 在创建项目文件夹（即代码拆分）后，使用以下命令导航到该文件夹：

cd code-splitting

项目结构：

它将如下所示：

JavaScript Next.js减少JavaScript文件大小

示例： 在这个例子中，我们使用代码拆分和next/link模块的客户端导航，在用户点击链接时动态加载Hello组件，而不需要重新加载整个页面。使用代码拆分动态导入Hello组件可以减少JavaScript包的大小，并提高应用性能。

步骤3： 在pages目录下创建index.js和about.js文件。

JavaScript

// pages/index.js 
import Link from "next/link"; 
export default function Index() { 
    const linkStyle = { 
        backgroundColor: "green", 
        color: "white", 
        fontSize: "1rem", 
        padding: "0.5rem 1rem", 
        borderRadius: "4px", 
        border: "none", 
        cursor: "pointer", 
    }; 
  
    // Showing styled link component. 
    return ( 
        <div style={{ margin: "2rem" }}> 
            {/* Create a link to the "hello"  
            page using Link component. */} 
            <Link href="/hello" style={linkStyle}> 
                Click Me! 
            </Link> 
        </div> 
    ); 
}

JavaScript

// pages/about.js 
import Link from "next/link"; 
  
export default function About() { 
    const linkStyle = { 
        backgroundColor: "green", 
        color: "white", 
        fontSize: "1rem", 
        padding: "0.5rem 1rem", 
        borderRadius: "4px", 
        border: "none", 
        cursor: "pointer", 
    }; 
  
    // Showing styled link component. 
    return ( 
        <div style={{ margin: "2rem" }}> 
            {/* Create a link to the "hello"  
            page using Link component. */} 
            <Link href="/hello" style={linkStyle}> 
                Click This! 
            </Link> 
        </div> 
    ); 
}

CSS

/* global.css*/
html, 
body { 
    padding: 0; 
    margin: 0; 
    font-family: -apple-system,  
        BlinkMacSystemFont, Segoe UI,  
        Roboto, Oxygen, Ubuntu,  
        Cantarell, Fira Sans, Droid Sans,  
        Helvetica Neue, sans-serif; 
} 
  
a { 
    color: inherit; 
    text-decoration: none; 
} 
  
* { 
    box-sizing: border-box; 
} 
  
@media (prefers-color-scheme: dark) { 
    html { 
        color-scheme: dark; 
    } 
  
    body { 
        color: white; 
        background: black; 
    } 
}

步骤4： 创建一个“components/Hello.js”模块，导出一个React组件。

Javascript

// components/Hello.js 
import React from 'react'; 
  
export default function Hello({ name }) { 
  
    // Render component with "name" prop message 
    return <div> <h1>Welcome To {name}! </h1> </div>; 
}

步骤5： 使用Hello组件动态导入，创建一个“pages/hello.js”页面。

Javascript

// pages/hello.js 
import dynamic from "next/dynamic"; 
  
// Import Hello component dynamically 
const Hello = dynamic( 
    () => import("../components/Hello") 
    .then((mod) => mod.default), { 
        ssr: false, 
    } 
); 
  
export default function HelloPage() { 
  
    // Show Hello component with name prop 
    return <Hello name="GeeksforGeeks" />; 
}

步骤6： 要运行应用程序，请打开终端并输入下面列出的命令。访问 http://localhost:3000/ 查看输出结果。