Next.js 是一个基于 React 的 SSR（服务器渲染）框架，它内置了 webpack，为我们提供了一种更加简单快捷的前端开发方式。
然而，webpack 默认配置并不适用于所有场景，可能会造成项目性能的下降。因此，为了提高项目的性能，我们需要对 webpack 进行一些优化。
1. 使用 Tree Shaking
Tree Shaking 是一种 JavaScript 代码优化技术，它可以将未使用的代码自动删除掉，从而减少项目的体积。
在 Next.js 中，我们可以通过在 next.config.js 中进行如下配置来开启 Tree Shaking：
-- -------------------- ---- -------
-------------- - -
-------- -------- - -------- -- -- -
-- ----------- -
-------------------------- - -----
------------------------------- - -----
-
------ -------
-
--在这里，我们只开启了客户端的 Tree Shaking。如果需要开启服务器端的 Tree Shaking，将 isServer 设置为 true 即可。
2. 使用 Code Splitting
Code Splitting 是一种将项目代码拆分成多个文件的技术，可以提高项目的加载速度。
在 Next.js 中，我们可以通过 dynamic 函数进行 Code Splitting。
-- -------------------- ---- -------
------ ------- ---- ---------------
----- ---------------- - ---------------------------------------- -
-------- -- -- ------------------
---- -----
---
------ ------- -------- ------ -
------ -
-----
----------------- --
------
--
-在这里，import('../components/Dynamic') 会被动态地生成一个新的 JavaScript 文件，只有当页面真正需要使用到该组件时，才会进行加载。
3. 缓存
缓存是另一种提高项目性能的方法。通过对一些已经被加载的静态资源进行缓存，我们可以减少网络请求的次数，提高页面的加载速度。
在 Next.js 中，我们可以通过 next-offline 插件来进行缓存的配置。先安装插件：
npm i next-offline --save-dev
然后在 next.config.js 中进行如下配置：
-- -------------------- ---- ------- -- -------------- ----- ----------- - ------------------------ ----- ---------- - - -- ---- ------- ------ -- -------------- - ------------------------
最后，运行 npm run build && npm run export，即可在 out/ 目录下生成一个可以离线使用的 App。
4. 使用 Gzip 压缩
Gzip 压缩是一种减小文件体积的方法。在 Next.js 中，我们可以通过 compression-webpack-plugin 插件来进行 Gzip 压缩。
先安装插件：
npm install --save-dev compression-webpack-plugin
然后在 next.config.js 中进行如下配置：
-- -------------------- ---- -------
-- --------------
----- ----------------- - --------------------------------------
-------------- - -
-------- -------- - -------- -- -- -
--------------------
--- -------------------
--------- ------------
---------- -------
----- -----------------------
--------------------- ------
--------- ---
--
--
------ -------
-
--总结
在本篇文章中，我们介绍了 Next.js 中 webpack 的优化方法，包括 Tree Shaking、Code Splitting、缓存和 Gzip 压缩。这些优化方法可以帮助我们提高项目的性能，缩短页面的加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64904e1148841e9894e791d9