nuxt-purgecss
packages
Our great sponsors
nuxt-purgecss | packages | |
---|---|---|
2 | 38 | |
466 | 419 | |
0.4% | 2.1% | |
3.2 | 6.5 | |
6 days ago | 16 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
nuxt-purgecss
-
How to start optimized Vuetify 3 Nuxt 3 project
What about themes. When we analyze the created html bundle .output/public/index.html we imidiately see an large section in the html head. Read more about it in official documentation here. It contains whole configuration for v-theme--light, v-theme--dark and lots of generated selectors for each color configuration.
We did not specify any theme to use but Vuetify internally by default applies theme light to everything within the
v-app
block. Therfore in generatedindex.html
we can see that many elements use classesv-theme--light
. But what if we disable themes in Vuetify totally? Will this section with unnecessary unused theme selectors and variables disapear? Lets try..We can try with disabling themes as described here in
plugins/vuetify.ts
:
export default createVuetify({ /* ADD */ theme: false, ... })
Enter fullscreen mode Exit fullscreen modeAfter re-generating no theme selectors are applied anymore on any html elements, good, disabling of themes worked as expected. But... the
</code> section with unused selectors still remains as before in the head of generated index.html file. π</p> <p>Consider this a bug? Why does Vuetify add thise code if it is marked that themes are not desired and not used? Is there some way to remove all this redundand code, or only enable <code>light</code> theme and not <code>dark</code> to reduce amout of added code?</p> <p><em>To be updated when I know, but feel free to comment this in comments!</em></p> <h5> <a name="clean-out-unused-css" href="#clean-out-unused-css"> </a> <a href="#purgecss">Clean out unused CSS</a> </h5> <p>After some digging <strong>nuxt-purgecss</strong> seems like a good option to try to remove unnecessary css from final bundle. It must be mentioned that removal of unused css is generally a major issue in many projects and a topic of discussions. There does not exist any perfect tool for it at the writing moment. In order not to remove too much of the code we must have knowledge of how purgecss works and of the code whe want to minify. We need to configure purgecss in a way so thatt when/if new persons on the team do introduce new code, to ensure that it will not by accident remove related css in the final build. By my opinion it is better to optimaze to little and left a bit of unused code than risk that some part of page, some unusal state we seldom visit, or test, will stop working.</p> <p><em>I reccomend to read this good article mentioning issues with automatic css removal - <a href="https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/">How Do You Remove Unused CSS From a Site?</a>.</em></p> <p>Purge css is a dummy tool, it scans html, vue and js files on locations that we provide to it, and create a list of selectors of all classes is finds. In some file x.html with <code><p class="bg-red"></code> it finds bg-red. In a vue file with <code><v-btn class="elevation-6"></code> it finds elevation-6 and so on. Then it analyzes the code that css files that are created by our project and removes all selectors from it not in this list. So customization of such a till to look for code in all locations the code is used from is essential for this to work. This is when it gets tricky with third party plugin like vuetify.</p> <p>Vuetify 3 generates its components with styles based on props and with help of render function. It is very tricky to find files in node_modules/vuetify where whe components are created and defining all classes and used selectors. </p> <p>I like using Vuetify with Nuxt and it is for the <strong>following little trick</strong>.</p> <p><strong>First build a static site</strong> as nuxt provides this possibility in very easy way. Then ALL html will be generated WITH all classes selectors in dist folder.</p> <p><strong>Afterward provide the dist folder</strong> to purgecss as a content location and do your build. Then purge have all class names and selector it need to keep from removing in the final css bundle.</p> <p>Here is how I did:</p> <p>Install the <strong>nuxt-purgecss</strong> plugin<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm i <span class="nt">-D</span> nuxt-purgecss </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add purgecss module and import our custom purgecss settings in <code>nuxt.config.ts</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="cm">/* ADD */</span> <span class="k">import</span> <span class="nx">purgeConfig</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./modules/purgecss/config</span><span class="dl">'</span><span class="p">;</span> <span class="p">...</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">defineNuxtConfig</span><span class="p">({</span> <span class="na">modules</span><span class="p">:</span> <span class="p">[</span> <span class="p">...</span> <span class="cm">/* ADD */</span> <span class="p">[</span><span class="dl">'</span><span class="s1">nuxt-purgecss</span><span class="dl">'</span><span class="p">,</span> <span class="nx">purgeConfig</span><span class="p">],</span> <span class="p">],</span> <span class="p">...</span> <span class="p">});</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add file and following settings in <code>modules/pergecss/config.js</code>:<br> <em>Note! There is lot of disabled code and I left it there for educational purpose. It can be used for option when we can not use static-generated-html method/trick. Then uncomment the comments, analyze the code and get your head dirty trying to expend the lists as your project grows.</em><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Default safelist: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts</span> <span class="kd">const</span> <span class="nx">defaultSafelist</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// 'body',</span> <span class="c1">// 'html',</span> <span class="c1">// 'nuxt-progress',</span> <span class="c1">// '__nuxt',</span> <span class="c1">// /-(leave|enter|appear)(|-(to|from|active))$/, // Normal transitions</span> <span class="c1">// /^nuxt-link(|-exact)-active$/, // Nuxt link classes</span> <span class="c1">// /^(?!cursor-move).+-move$/, // Move transitions</span> <span class="c1">// /.*data-v-.*/, // Keep scoped styles</span> <span class="c1">// // New Vue3 selectors</span> <span class="c1">// /:slotted/,</span> <span class="c1">// /:deep/,</span> <span class="c1">// /:global/,</span> <span class="p">];</span> <span class="c1">// Default content: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts</span> <span class="kd">const</span> <span class="nx">defaultContent</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// 'components/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'layouts/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'pages/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'composables/**/*.{vue,jsx?,tsx?}',</span> <span class="c1">// 'App.{vue,jsx?,tsx?}',</span> <span class="c1">// 'app.{vue,jsx?,tsx?}',</span> <span class="c1">// 'plugins/**/*.{js,ts}',</span> <span class="c1">// 'nuxt.config.{js,ts}',</span> <span class="p">];</span> <span class="cm">/* Vuetify: Additional locations to scan */</span> <span class="kd">const</span> <span class="nx">additionalLocations</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">modules/purgecss/static-generated-html/**/*.html</span><span class="dl">'</span><span class="p">];</span> <span class="cm">/* Vuetify: Selectors (runtime generated) better never not to remove */</span> <span class="kd">const</span> <span class="nx">vuetifySafelist</span> <span class="o">=</span> <span class="p">[</span> <span class="c1">// /v-application/, // generated by vApp</span> <span class="c1">// /v-layout/, // generated by vApp</span> <span class="c1">// /v-toolbar/, // generated by vAppBar</span> <span class="c1">// /v-locale/, // generated runtime by i.e vBtn if locale enabled</span> <span class="c1">// /v-icon/, // generated by vBtn</span> <span class="c1">// /flex-grow-1/, // generated by v-spacer</span> <span class="c1">// /v-responsive/, // generated eager</span> <span class="p">];</span> <span class="cm">/* Vuetify: Components and directives used in this project */</span> <span class="kd">const</span> <span class="nx">usedComponents</span> <span class="o">=</span> <span class="p">[</span> <span class="sr">/v-ripple/</span><span class="p">,</span> <span class="c1">// when enabled, generated at runtime by vBtn</span> <span class="c1">// /v-app/,</span> <span class="c1">// /v-app-bar/,</span> <span class="c1">// /v-app-bar-nav-icon/,</span> <span class="c1">// /v-navigation-drawer/,</span> <span class="c1">// /v-toolbar-title/,</span> <span class="c1">// /v-container/,</span> <span class="c1">// /v-sheet/,</span> <span class="c1">// /v-main/,</span> <span class="c1">// /v-card/,</span> <span class="c1">// /v-btn/,</span> <span class="c1">// /v-col/,</span> <span class="c1">// /v-row/,</span> <span class="p">];</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="na">content</span><span class="p">:</span> <span class="p">[...</span><span class="nx">defaultContent</span><span class="p">,</span> <span class="p">...</span><span class="nx">additionalLocations</span><span class="p">],</span> <span class="na">safelist</span><span class="p">:</span> <span class="p">{</span> <span class="na">greedy</span><span class="p">:</span> <span class="p">[...</span><span class="nx">vuetifySafelist</span><span class="p">,</span> <span class="p">...</span><span class="nx">usedComponents</span><span class="p">],</span> <span class="na">standard</span><span class="p">:</span> <span class="p">[...</span><span class="nx">defaultSafelist</span><span class="p">],</span> <span class="p">},</span> <span class="p">};</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>All this can be exchanged with onliner in <code>nuxt.config.ts</code> but I wanted to show how uch configuration is needed for this small about of code for purgecss to let the code it should not remove be. That is when we do not use our little trick with build twice with generated content as input.</p> <p>After all those modifications run now <code>npm run generate</code> followed by <code>npm run preview</code> and it will generate static files in <code>.output/public/</code> folder. </p> <p>π©»<strong>Analazing generated file:</strong><br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 184kB (67kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 14kB (3.4kB gzipped)</p> <p>The css is much much smaller than from beggining.ππ <br> We started with 370kB and ended up with 14kB (unzipped). It an awsome reduction.</p> <h3> <a name="conclusion" href="#conclusion"> </a> <a href="#conclusion"><strong>CONCLUSION</strong></a> </h3> <p>We created a nice and educational starter template project using Vuetify 3 on top of Nuxt 3. We did did som small optimization to keep the bundle small in production.</p> <p>BEFORE OPTIMIZATION<br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 408kB (125kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 371kB (51kB gzipped)</p> <p>AFTER OPTIMIZATION<br> <code>.output/public/index.html</code> 14kB (3kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.js</code> 184kB (67kB gzipped)<br> <code>.output/public/_nuxt/enter.xxx.css</code> 14kB (3.4kB gzipped)</p> <p>We reduced in total from 795kB to 212kB (zipped from 179kB to <strong>73kB</strong>)<br> Reduction: 75% unzipped and 60% unzipped.</p> <p>I know there index.html contains lots of unused themes. At writing moment I have no solution for that but will update here asap I know.</p> <p>Do you have any comment what more can be done to minimize bundle for this starter even more?</p> <p>Hope you did learn something usefull through this article.</p> <p>βοΈ</p>
- nuxt-purgecss has Nuxt3 support now π
packages
-
Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS
I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement π.
-
How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development. | Stylify CSS
Hi all!I have made a guide on how to switch from Styled Components CSS-in-JS to Stylify Utility-First CSS.Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.I would be happy for any feedback if it is understandable :).Thanks in advance for any response!
-
How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.
Say goodbye to CSS-in-JS and Runtime scripts for injecting and compiling CSS and hello to lightning-fast coding with Stylify Utility-First CSS. As a React frontend engineer, you know the importance of efficient, streamlined solutions that don't sacrifice style or functionality. And that's exactly what Stylify offers.
-
Best Practices for Utility-First CSS
const compilerConfig = { // CSS variables are note enabled by default in Stylify replaceVariablesByCssVariables: true, // https://stylifycss.com/docs/stylify/compiler#variables variabels: { textFontSize: '12px', textColor: '#000', // Tries to match a screen, can be sm, md, lg... minw400px: { textFontSize: '18px' }, // For a @media (prefer-color-scheme: dark) dark: { textColor: '#fff' }, // When screen is not found, // it falls back to a custom selector // in this case element with the ".dark" class // which will very probably be the root (html el) '.dark': { textColor: '#fff' }, } };
-
Using Beautiful Material Themes from Material Theme Builder in Stylify CSS
Apart from the colors module, there is a typography.module.css. You might want to remove it as well and rewrite these classes into Stylify CSS components using Stylify dynamic components syntax.
-
Stylify CSS: Code your SvelteKit website faster with CSS-like utilities
Stylify + SvelteKit. Style your SvelteKit website faster with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get generated CSS with advanced optimization for production.
-
Stylify CSS: Code your Remix website faster with CSS-like utilities
const { Bundler } = require('@stylify/bundler'); const isDev = process.argv[process.argv.length - 1] === '--w'; const bundler = new Bundler({ watchFiles: isDev, // Optional compiler: { mangleSelectors: !isDev, // https://stylifycss.com/docs/stylify/compiler#variables variables: {}, // https://stylifycss.com/docs/stylify/compiler#macros macros: {}, // https://stylifycss.com/docs/stylify/compiler#components components: {}, // ... } }); // This bundles all CSS into one file // You can configure the Bundler to bundle CSS for each page separately // See bundler link below bundler.bundle([ { files: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' }, ]);
- Want to write CSS faster? Don't want to study any framework? Try Stylify CSS π
-
Stylify CSS: Style your website faster with CSS-like utilities (StylifyCSS.com)
I have made a Stylify CSS that uses CSS-like selectors to generate optimized utility-first CSS. It can be integrated into various tools: Next, Vue, Angular, Next, Nuxt.
What are some alternatives?
vuetify-3-nuxt-3-minimal-template
brainyduck - π₯ A micro "no-backend" framework π€― Quickly build powerful BaaS using only your graphql schemas
nuxt-webpack-optimisations - Make your Nuxt.js webpack builds faster β‘
PrivMX JS Crypto Lib - Javascript crypto library ...
bridge - π Experience Nuxt 3 features on existing Nuxt 2 projects
NectarJS - π± Javascript's God Mode. No VM. No Bytecode. No GC. Just native binaries.
storyblok-nuxt - Storyblok Nuxt module
vulcan-next - The Next starter for GraphQL developers
typed-vuex - π¦ A typed store accessor for vanilla Vuex.
socket - Command Line Interface Static Files Server written in TypeScript for Single Page Applications serving in Node with Socket.IO
teachcode - A tool to develop and improve a studentβs programming skills by introducing the earliest lessons of coding.
jirax - :sunglasses: :computer: Simple and flexible CLI Tool for your daily JIRA activity (supported on all OSes)