代码拆分

代码拆分将应用程序的各个页面分解成更小的包，然后在访问新页面时按需加载。这可以显着减少浏览器加载的初始 JavaScript 包的大小，从而缩短首次渲染时间。

虽然代码拆分对于非常大的项目很有帮助，但它确实需要在访问新页面时发出额外的请求。一般来说，如果你能够使用单个包，你的应用程序会感觉更敏捷。

要启用代码拆分，你需要调整 resolve 回调函数，该函数位于你的 createInertiaApp() 配置中，具体方法取决于你使用的捆绑器。

使用 Vite

Vite 在使用其 import.meta.glob() 函数时默认启用代码拆分（或懒加载），因此只需省略 { eager: true } 选项，或将其设置为 false，即可禁用急切加载。

  resolve: name => {
-   const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-   return pages[`./Pages/${name}.vue`]
+   const pages = import.meta.glob('./Pages/**/*.vue')
+   return pages[`./Pages/${name}.vue`]()
  },

使用 Webpack

要使用 Webpack 进行代码拆分，首先需要通过 Babel 插件启用 动态导入。现在就安装它吧。

npm install @babel/plugin-syntax-dynamic-import

接下来，在你的项目中创建一个名为 .babelrc 的文件，并使用以下配置

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

最后，更新应用程序初始化代码中的 resolve 回调函数，使用 import 而不是 require。

- resolve: name => require(`./Pages/${name}`),
+ resolve: name => import(`./Pages/${name}`),

你还可以考虑使用缓存清除来强制浏览器加载最新版本的资产。为此，请将以下配置添加到你的 webpack 配置文件中。

output: {
  chunkFilename: 'js/[name].js?id=[chunkhash]',
}