NUXT 压缩/缩小/组合 ccs、js 和 HTML

Question

I am working on a project made using NUXT we use yarn for package management.

I need to compress (and perhaps combine if possible) js, css and html to speed up load time.

I read " https://www.npmjs.com/package/nuxt-compress "

I tried to add module.export to NUXT.config.js but couldn't make it to work.

Will some one kindly guide me step by step how to configure compression on build time as I am new to NUXT.

Where to put it and what command to run when I build or run the project.

I guess it is doing some thing similar to what I require when I do "yarn build". It is minifying the css and js. But can we do more? Eg gzip and combine multiple js, css or html together?

Answer 1

You can add to the build configuration of your Nuxt project using html.minify

This is the currently supported configuration: https://nuxtjs.org/api/configuration-build#html-minify

It uses https://github.com/kangax/html-minifier behind the scenes.

html.minify

Type: Object

Default:

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

Attention: If you make changes to html.minify, they won't be merged with the defaults!

Configuration for the html-minifier plugin used to minify HTML files created during the build process (will be applied for all modes).

Answer 2

This didn't work for me :(

npm install html-minifier

in 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
      }
    }, 
  },