Git Product home page Git Product logo

luxdamore / nuxt-prune-html Goto Github PK

View Code? Open in Web Editor NEW
77.0 3.0 6.0 10.16 MB

πŸ”Œβš‘ Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering

Home Page: https://luxdamore.github.io/nuxt-prune-html/

License: MIT License

JavaScript 93.37% CSS 2.17% Vue 4.46%
nuxt-module nuxtjs vuejs modules cheerio html prune bot performance audit

nuxt-prune-html's Introduction

Hi there πŸ‘‹

Me, myself and I

Luca Iaconelli's github stats

nuxt-prune-html's People

Contributors

dependabot[bot] avatar luxdamore avatar patrioticcow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

nuxt-prune-html's Issues

Prune Html failed because of CDN

Hi!

We just apply the module to our website, but the function seems failed because of CloudFront CDN.
We notice that your website (https://www.fallimenti.it/) uses CloudFront CDN as well, and we like to know how did you setup your CDN settings to make it work?

The module is really a life-saver!
Thanks for advance!

vue-lazyload not working

Hello, I tested this plugin it's awesome but it doesn't seem to work with vue-lazyload. How do I make them work at the same time?

Isn't it black hat?

Is there any risk of using it, like black hat or any other thing?

How does google sees this practice?

Or is it a white hat?

Node GC crash when using nuxt:generate

Describe the bug
When using the generate command of Nuxt (without static mode set) the generation fails with a Garbage Collection failure.

To Reproduce

  • Setup a Nuxt Project with the nuxt-prune-html module
  • Add a few pages
  • Generate the website using yarn nuxt generate
    Expected behavior
    Generation is successful and pruning is applied

Screenshots

Additional context
I've tested it on my machine and when using Netlify build system.
Node version: 15.14.0

Change default string matching for lighthouse

Hi!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is.

  • Following this list of UAs, what if the default string was lighthouse|google page speed? Also, it was not directly clear that the lighthouseUserAgent was a (string that would compile to a) Regex value.

Describe the solution you'd like
A clear and concise description of what you want to happen.

  • Maybe we could add in the docs that lighthouseUserAgent will be converted to a Regex and that, by default, it is case insensitive.

config selectors not working properly

Describe the bug
I was using this module with my nuxt web app, it worked as expected. but since this month it doesn't prune the selectors in lighthouse which leads to a mediocre performance score

To Reproduce
Steps to reproduce the behavior:

  1. use a custom script like gtm with a class="gtm"
  2. config the nuxt-prune-html as follow:
  hideGenericMessagesInConsole: true
  hideErrorsInConsole: true
  selectors: [
    'script[class="gtm"]',
  ],
}
  1. run npm run build && npm run start
  2. run a lighthouse report

Nuxt version: 2.15.7

Expected behavior
the gtm script shouldn't be served when running a lighthouse report

Screenshots
Capture d’écran 2021-09-30 aΜ€ 10 20 29

It shows blank when I enable nuxt-prune and access it via localhost

Here's the config I setup for my nuxt app

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',
  ssr: true
}

and I add nuxt prune as indicated in the documentation

modules: ['@luxdamore/nuxt-prune-html'],

  pruneHtml: {
    enabled: true
  },

to test it, I just force enable to true. I use yarn generate and yarn serve to test it locally, but what it showing is just all white. Did I do something wrong about its implementation?

Exclude prune logic

Hi! Can you explain queryParametersToExcludePrune logic?

I have added this property in nuxt.config.js. Then, I request page with ?prune=false. But it's looks like not working (same score like as pruned). Maybe I did something wrong? How I can check prune/unprune?

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.