nuxt3 中实现splitChunks

在 Nuxt.js 3.x 版本中，SplitChunks（也称为代码分割）是一个用于优化应用程序性能的技术，它允许将模块拆分成更小、更独立的部分，只在需要的时候加载。在 Nuxt 的配置中，你可以通过 `nuxt.config.js` 来管理 SplitChunks。以下是关键步骤：

1. **启用分块**:
首先，在 `nuxt.config.js` 文件中设置 `build.splitChunks` 属性开启自动分块：

   export default defineNuxtConfig({
     build: {
       splitChunks: {
         enabled: true,
         chunks: 'all', // 或者 'async'
       },
     },
   });

2. **控制如何分割**:
- `maxSize`: 设置最大分割大小，超过这个值的块会被合并。
- `minSize`: 确定最小块大小才开始分割。
- ` maxSizeAsyncRequests`: 指定单个异步请求的最大体积。
- `maxInitialRequests`: 控制页面初始加载时的最大同步请求数。

3. **针对路由规则的分块**:
使用 `runtimeChunk` 和 `namedChunks` 可以对特定路由进行定制，比如让某个页面的 JavaScript 为单独的运行时chunk：

   build: {
     runtimeChunk: {
       name: 'manifest', // 名称可以自定义
     },
   }

4. **查看分块报告**:
在构建完成后，可以在浏览器开发者工具的“分割”部分查看详细的分块信息。