如何在一行 Nuxt.js 中缩小 HTML 代码？答案

【问题标题】：How to minify HTML code in one line Nuxt.js?如何在一行 Nuxt.js 中缩小 HTML 代码？
【发布时间】：2020-05-04 16:37:27
【问题描述】：

我想知道在 Nuxt.js 中是否可以将页面源代码缩小到一行？

【问题讨论】：

标签： static nuxt.js minify

【解决方案1】：

我认为 nuxt 已经缩小了 hmtl 本身。在https://nuxtjs.org/api/configuration-build/#html-minify 中了解更多信息。

如果你想缩小 css 和 js，试试这个 ini nuxt.config.js：

build: {
    html:{
      minify:{
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        minifyURLs: true,
        removeComments: true,
        removeEmptyElements: true
      }
    }

【讨论】：

【解决方案2】：

answer from Prana 是朝着正确方向迈出的一步。要将页面源代码缩小到一行，您还应该添加：

preserveLineBreaks：假
collapseWhitespace：真

注意下面代码 sn-p 中 build.html.minify 下的最后两行。

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

【讨论】：

【解决方案3】：

不确定是否可以将其缩小为一行，但您绝对可以对 HTML 进行一些缩小。查看文档的这一部分：

https://nuxtjs.org/api/configuration-build/#html-minify

根据作者的说法，nuxt 在后台使用https://github.com/kangax/html-minifier，似乎有很多缩小选项可供选择。

【讨论】：