禁用 nuxt 代码拆分。如何将所有内容打包到一个文件中

Posted 2023-02-16

【中文标题】禁用 nuxt 代码拆分。如何将所有内容打包到一个文件中

【英文标题】：disable nuxt code splitting. how to pack everything into a single file

【发布时间】：2021-08-04 02:49:10

【问题描述】：

我有一个简单的 vue / nuxt 项目，我想通过 AWS lambda 提供服务。 为此，我想将所有内容组合到一个文件中。

我看到 Nuxt 正在拆分文件以便只加载给定时间重要的内容，但该应用程序是一个页面，供内部使用，加载时间/内存使用情况完全无关紧要。

我的问题是 2 倍：

如何禁用文件拆分 有没有办法将所有内容打包到一个 index.html 文件中？我没有在网上找到解决方案，因为在我开始研究解决方案的那一刻，我一直在寻找与我的案例完全无关的 s-s-r 帖子。

【问题讨论】：

你想完全静态还是只用 SPA 就够了？

完全静态：我想要一个 index.html 文件，其中嵌入了所有脚本。基本上没有网络服务器，只是一个静态文件

那么，target: static 和 s-s-r: false 在这种情况下还不够吗？您将需要 JS 来拥有任何内容，但至少，所有内容都将被备份到一个 JS 文件中。几乎是 SPA 应用的基本设置。

不幸的是，这将为我提供一个仍然包含多个 js 文件的项目（并且 index.html 将期望网络服务器为其他文件提供服务）。我正在寻找一种打包方法，以便可以在浏览器中本地打开 index.html（或作为 aws 的 lambda 中的单个文件）

我在回答中添加了 2 篇专门针对 lambda 托管的文章。不确定在 Netlify/Vercel/alike 上运行它的好处。它在某些方面更好吗？

【参考方案1】：

对于拆分部分，这个全部设置为 false 就足够了：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#splitchunks

这样

export default 
  build: 
    splitChunks: 
      layouts: false,
      pages: false,
      commons: false
    
  

这个也应该有帮助：https://github.com/nuxt/nuxt.js/issues/2363

你也可以在这里完全控制 webpack 配置：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#optimization

---

关于在 Lambda 上的托管，您可以查看这两篇文章：

https://www.serverless.com/examples/aws-node-vue-nuxt-s-s-r https://medium.com/@fernalvarez/serverless-side-rendering-with-aws-lambda-nuxtjs-b94d15782af5

【讨论】：

splitChunks 减少了dist/_nuxt/ 中.js 文件的数量，但仍然有几个这样的文件，没有一个.html 嵌入了所有文件