Question

我有一个从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个文件。

Answer 1

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

Answer 2

可以，但是不可以。

此分离的目的是减少对应用程序进行更新时的加载时间和带宽使用。不经常更改的项目（例如Vue，Bootstrap之类的库等）位于vendor文件中，而经常更改的项目位于主JS文件中。这样，对应用程序进行细微调整仅需要用户重新下载应用程序的文件（文件大小通常很小，通常是很小的），而不使用使用的所有大型库。

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

Answer 3

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

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

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

3 个答案: