【问题标题】：NUXT compress/minify/combine ccs, js and HTMLNUXT 压缩/缩小/组合 css、js 和 HTML
【发布时间】：2020-06-12 13:05:14
【问题描述】：

我正在做一个使用 NUXT 制作的项目，我们使用 yarn 进行包管理。

我需要压缩（如果可能的话还可以组合）js、css 和 html 以加快加载时间。

我读到“https://www.npmjs.com/package/nuxt-compress”

我尝试将 module.export 添加到 NUXT.config.js 但无法正常工作。

由于我是 NUXT 的新手，请有人逐步指导我如何在构建时配置压缩。

在我构建或运行项目时放置它以及运行什么命令。

我猜它正在做一些类似于我做“纱线构建”时需要做的事情。它正在缩小css和js。但我们能做得更多吗？例如。 gzip并将多个js、css或html组合在一起？

【问题讨论】：

标签： javascript css vue.js nuxt.js yarnpkg

【解决方案1】：

这对我不起作用:(

npm install html-minifier

在 nuxt.config.js 中

  build: {
    html: {
      minify:{
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        removeComments: true,
        preserveLineBreaks: false,
        collapseWhitespace: true
      }
    }, 
  },

【讨论】：

你有没有机会解决这个问题？
@AlanYong，它可以工作但不是 100%，缺少一些 HTML 部分，我现在不记得确切的细节，有办法解决这个问题，但需要添加一些在模板文件中忽略语句，当时对我来说不值得所以我放弃了
@ArIT 最后我也放弃了。 nuxtjs 毕竟不成熟。我切换到nextjs。好多了
@AlanYong 我也在做同样的事情，我开始学习 React 然后下一步

【解决方案2】：

您可以使用 html.minify 添加到 Nuxt 项目的构建配置中

这是当前支持的配置：https://nuxtjs.org/api/configuration-build#html-minify

它在幕后使用https://github.com/kangax/html-minifier。

html.minify

类型：对象

默认值：

{
  collapseBooleanAttributes: true,
  decodeEntities: true,
  minifyCSS: true,
  minifyJS: true,
  processConditionalComments: true,
  removeEmptyAttributes: true,
  removeRedundantAttributes: true,
  trimCustomFragments: true,
  useShortDoctype: true
}

注意：如果您对 html.minify 进行更改，它们将不会与默认值合并！

用于压缩在构建过程中创建的 HTML 文件的 html-minifier 插件的配置（将应用于所有模式）。

【讨论】：