Next.js 是一款基于 React 的服务器端渲染框架，它提供了许多方便的功能，比如自动代码分割、静态文件生成、热更新等等。然而，随着项目的复杂度增加，应用的体积也会随之增大，这会影响用户的加载速度和体验。因此，在开发 Next.js 应用时，我们需要考虑如何优化打包体积。
1. 代码分割
Next.js 的代码分割功能可以让我们将应用代码切分成多个小块，只加载需要的部分，从而提高应用的加载速度。我们可以使用 dynamic 函数来实现代码分割，例如：
import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('../components/MyComponent'));
上面的代码中，MyComponent 组件是通过 dynamic 函数导入的，这意味着它会被分割成一个单独的文件，并在需要的时候才会被加载。这种方式可以避免将整个应用打包成一个巨大的文件。
2. 压缩代码
压缩代码可以有效减小应用的体积，从而提高加载速度。我们可以使用 UglifyJS 来压缩代码。在 Next.js 中，我们可以通过配置 webpack 来使用 UglifyJS，例如：
-- -------------------- ---- ------- -- -------------- ----- -------------- - ----------------------------------- -------------- - - -------- -------- - --- -- -- - -- ------ - ----------------------- ------------------ - ------ ------- - --展开代码
上面的代码中，当 dev 为 false 时，我们会添加 UglifyJsPlugin 插件来压缩代码。
3. 使用 CDN
使用 CDN 可以将静态资源（如图片、字体等）从服务器上分离出来，从而减少服务器的请求负担，提高加载速度。在 Next.js 中，我们可以通过配置 assetPrefix 来使用 CDN，例如：
// next.config.js module.exports = { assetPrefix: 'https://cdn.example.com/' };
上面的代码中，我们将 assetPrefix 设置为 CDN 的地址。
4. 避免重复打包
在开发过程中，我们可能会使用一些第三方库（如 React、lodash 等），这些库在多个页面中都会被引用。如果我们每次都将它们打包进应用中，那么会造成很多重复的代码。因此，我们需要将这些库单独打包成一个文件，避免重复打包。
在 Next.js 中，我们可以使用 externals 配置来将第三方库单独打包成一个文件，例如：
-- -------------------- ---- ------- -- -------------- -------------- - - -------- -------- - -------- -- -- - -- ----------- - ---------------- - - ------ -------- ------------ ---------- -- - ------ ------- - --展开代码
上面的代码中，我们将 react 和 react-dom 这两个库单独打包成一个文件，并将它们从应用中移除。
总结
通过以上优化方法，可以有效减小 Next.js 应用的体积，提高加载速度和用户体验。当然，还有很多其他的优化方法，需要根据具体情况来选择和实现。
示例代码见 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65100d2f95b1f8cacd8b2a43
