Optimize your website by reducing the size of CSS, JavaScript, and HTML files through NUXT's

I'm currently working on a project in NUXT utilizing yarn for managing packages.

My objective is to compress (and potentially merge) js, css, and html files to enhance load time efficiency.

I came across "https://www.npmjs.com/package/nuxt-compress" while doing some research.

Although I attempted to add module.export to NUXT.config.js, unfortunately, it didn't yield the desired results.

Could someone provide me with clear instructions on how to set up compression during build time? I am relatively new to NUXT.

Where should I place the code and which command do I need to execute when building or running the project?

I assume that "yarn build" accomplishes some level of optimization by minifying css and js. However, can we go further by implementing gzip and combining multiple files together like js, css, or html?

javascriptcssvue.jsnuxt.jsyarnpkg

Answer №1

To enhance the build configuration of your Nuxt project, consider utilizing the html.minify option.

For detailed information on this feature, refer to: https://nuxtjs.org/api/configuration-build#html-minify

The implementation is powered by https://github.com/kangax/html-minifier.

html.minify

Type: Object

Default:

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

Note: Any modifications made to html.minify will not override the predefined settings!

This configuration relates to the html-minifier plugin employed for optimizing HTML files generated during the build operation (applicable across all modes).

Answer №2

Unfortunately, this solution didn't yield the desired results for me.

npm install html-minifier

This is how I tried implementing it in my nuxt.config.js file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

csssass

Add slides in PowerPoint before or after the currently selected slide to enhance your presentation flow

I'm currently working on a function that pulls data from an API to convert PowerPoint presentations into base64 strings. Once I receive the response object, my goal is to seamlessly insert the slides into the existing presentation, exactly after the s ...

javascriptpowerpointoffice-jspowerpoint-addins

Facebook's Thumbs Down to My Code

I've been struggling to integrate a Facebook Like button on my blog using the following code: $("#fblike").append(" <iframe src='http://www.facebook.com/plugins/like.php?app_id=217624258276389&amp;" + window.location.href + "&amp;send ...

javascriptjqueryfacebookfacebook-like

How can we call a function in HTML from an external JavaScript file?

I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...

javascripthtmlflask

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

Problem with Bootstrap 5.3 navbar dropdown functionality not functioning as expected

I'm facing an issue with my code. I attempted to use both bootstrap 5.2 and 5.1, but neither seems to be working for me. I've tried opening it in both Chrome and Firefox, but the dropdown functionality is not functioning in either browser. Does a ...

javascripthtmldropdownnavbarbootstrap-5

React is choosing to re-render only one of the setState functions, neglecting the other

I'm currently in the process of developing a basic Tic Tac Toe game using React. The Objective: Each button in the game has its own state. When a button is clicked, it should change from ' ' to an 'X' and update the player's ...

javascriptreactjsasynchronoussetstatetic-tac-toe

Jquery Not Responding to HasChanged Function

I am a beginner and looking for some guidance. I am attempting to develop a single page app using Jquery and AJAX, but unfortunately nothing seems to be working; no errors or any other indication. There are three hyperlinks with hrefs: #/main, #/second, # ...

javascriptjqueryhtmljsonajax

Activate the submission button on AngularJS once a correctly formatted email is provided

Currently working on an AngularJS demo to better understand its functionalities. The next task on my list is to enable the submit button only when a valid email address is entered. I'm seeking guidance on how to approach this and what concepts I need ...

javascriptangularjs

Looking to transform a PHP output value

I have a form with checkbox input, and a hidden 'sibling' input attached to it, in order to generate values of either '0' or '3' based on the checkbox status. When unchecked, the value is '0', and when checked, the ...

javascriptphphtmlforms

Smoothly scroll through divs using JQuery

Let me share an issue I'm facing. I have implemented smoothDivScrolling on my webpage. The problem is that the scrollable area containing all the items to be scrolled always ends up being larger than the actual content. When I reach the last item i ...

jquerycsshtml

What is the best way to navigate a carousel containing images or divs using arrow keys while maintaining focus?

Recently, I have been exploring the Ant Carousel component which can be found at https://ant.design/components/carousel/. The Carousel is enclosed within a Modal and contains multiple child div elements. Initially, the arrow keys for navigation do not work ...

javascriptjqueryhtmlreactjsantd

Encountering an 'undefined' property error when clicking a button in Angular 1.x

Hey there, I have a question that might seem simple to some of you. I'm struggling with fixing an error and I don't quite understand why it's happening :( This error popped up while using Angular 1.x. What I need help with is creating an al ...

javascriptangularjs

The simple method of adjusting text opacity using CSS hover doesn't function as expected

I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse ...

htmlcsstexthoveropacity

Switching off toggle does not switch back to primary theme when clicking again for the second time

When I click the button for the first time, it changes the theme. However, when I click it a second time, nothing happens; it seems like it's stuck on the second theme forever. It should change themes with every click. Can someone please help me with ...

javascripthtml

The "Key" function from Object.keys does not yield true when compared to an identical string

Object.keys(data).forEach((key) => { bannerData[key] = data[key][0]; console.log(key); if (key == "timestamp") { labels.push(data[key]); console.log("wtf"); console.log(labels); ...

javascriptreactjs

A different approach to joining strings

Is there a different method to combine a '#' symbol like in the code snippet below? radioButtonID = '#' + radioButtonID; ...

javascript

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

javascriptajaxhtmlcanvas

What is the best way to evenly divide divs vertically on a Bootstrap website?

I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...

csstwitter-bootstrapresponsive-design

Discovering Route modifications with Nuxt and asyncData: a step-by-step guide

Hey everyone, I’m currently working on tracking route changes in my Nuxt.js app. Here is the middleware I have: export default function ({ route }) { return route; //but I'm not sure what to write here } index.vue File middleware: [route ...

vue.jsvue-routernuxt.js