Vue.js 构建并部署到单个文件答案

【问题标题】：Vue.js build and deploy to single fileVue.js 构建并部署到单个文件
【发布时间】：2018-09-20 14:04:12
【问题描述】：

我有一个从 webpack 创建的 Vue.js 应用程序，当我构建 (npm run build) 时，它会分别创建一个包含 static/css 和 static/js 文件夹的“dist”文件夹。我明白了

app.12345.js*
app.12345.map
manifest.556.js*
manifest.556.js.map
vendor.991.js*
vendor.991.js.map

在它生成的 index.html 中，它似乎只使用了标有星号 (*) 的文件。我的问题是，有没有办法将这 3 个压缩成一个文件，所以我只需要在我的索引页面中引用一个文件？喜欢 ~/myApp.js？我读过关于分块的文章，但我似乎无法得到少于列出的 3 个文件。

【问题讨论】：

放入你的 webpack 配置文件。看来你的文件不对。
我从来没有遇到过 Rollup + rollup-plugin-vue 这样的问题。
你可以在这里看到详细的答案：stackoverflow.com/questions/54508375

标签： vue.js webpack

【解决方案1】：

module.exports = {
  css: {
    extract: false,
  },
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
}

文件名：vue.config.js（根文件夹）

【讨论】：

【解决方案2】：

你可以，但你不应该。

这种分离的目的是在您更新应用程序时减少加载时间和带宽使用。不经常更改的东西——Vue、Bootstrap 等库等——放在vendor 文件中，而经常更改的项目放在主 JS 文件中。这样，在您的应用程序中进行细微调整只需要用户重新下载应用程序的文件（这些文件通常很小，文件大小）并且不是它使用的所有大型库.

这可能由您的 Webpack 配置中的 CommonsChunkPlugin 管理。

【讨论】：

【解决方案3】：

问题是：你为什么要这样做？这只适用于更少的代码，但如果项目变得更大，加载一个文件比三个单独的文件需要更长的时间。

【讨论】：

因此，当我在没有分块的情况下构建时，我得到一个 411KB 的 JS 文件（和一个 css 文件）。如果我让 webpack 保持原样，那么我会得到几个文件。 Vendor.xx.js 为 390KB； app.xx.js 22KB 和 manifest.xxx.js 1KB。所以从技术上讲，当我构建时，22KB 的应用程序文件应该是唯一一个根据加载速度更快的建议进行更改的文件。但是使用 webpack，每个构建都会生成一个唯一的块 id，并在文件名的 XXX 部分中替换。因此，如果我向 app.js 添加一个新字段，所有 3 个文件都会更改。 3个文件都需要浏览器重新下载？
如果chunk hash不匹配，会重新加载，同一个文件的情况，你的问题和这个case有什么关系？如果源代码发生变化，浏览器必须重新下载一些文件，这就是为什么我们需要让 js 文件更加分离，以便 webpack 可以更具体地跟踪更改，而不是使用一个文件。
我认为这是一个有效的问题。 vue init webpack-simple 将所有输出合并到一个文件中。如果只有 1 个输出文件，则更容易集成到其他系统中。