#Terser JS Minifier | Explore Tumblr posts and blogs

learning-code-ficusoft · 3 months ago

Text

How to Optimize Website Loading Speed for Better User Engagement

How to Optimize Website Loading Speed for Better User Engagement

Introduction

Why website speed matters for user experience and engagement.

Impact on bounce rates, SEO rankings, and conversions.

Brief mention of tools to measure speed (Google PageSpeed Insights, Lighthouse, GTmetrix).

1. Measuring Website Performance

How to use Google PageSpeed Insights and interpret the results.

Importance of Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift).

Using GTmetrix, Lighthouse, and WebPageTest for deeper insights.

2. Optimizing Images and Media

Use next-gen formats (WebP, AVIF) instead of PNG/JPEG.

Implement lazy loading (loading="lazy").

Compress images using tools like TinyPNG, ImageOptim.

Serve responsive images with srcset for different screen sizes.

3. Minimizing HTTP Requests

Reduce the number of external scripts, fonts, and stylesheets.

Combine CSS and JavaScript files where possible.

Use icon fonts or SVGs instead of multiple image icons.

4. Implementing Efficient Caching

Enable browser caching using .htaccess or response headers.

Use a Content Delivery Network (CDN) to serve assets globally (Cloudflare, Amazon CloudFront).

Optimize caching rules for static content (CSS, JS, images).

5. Reducing JavaScript and CSS Blocking

Minify JavaScript and CSS using Terser, UglifyJS, or CSSNano.

Defer or asynchronously load JavaScript (async and defer attributes).

Remove unused CSS with tools like PurifyCSS or UnCSS.

6. Optimizing Server Performance

Upgrade to faster hosting (VPS, Cloud Hosting, or Managed WordPress hosting).

Enable Gzip or Brotli compression to reduce file sizes.

Implement HTTP/2 or HTTP/3 for faster multiplexed connections.

7. Database Optimization

Optimize database queries and indexes for better efficiency.

Use caching mechanisms like Redis or Memcached.

Regularly clean up unused data, revisions, and logs in CMS platforms like WordPress.

8. Mobile Performance Optimization

Ensure responsive design and mobile-friendly assets.

Minimize heavy animations and background videos on mobile.

Optimize touch interactions and reduce excessive scripts.

9. Using a Content Delivery Network (CDN)

Distribute assets through a CDN to load content from the nearest server.

Popular CDN providers: Cloudflare, AWS CloudFront, Fastly, Akamai.

Reducing Time to First Byte (TTFB) by leveraging edge servers.

10. Continuous Monitoring & Testing

Set up performance monitoring with Google Lighthouse, WebPageTest.

A/B test different optimizations and measure impact.

Use New Relic, Datadog, or Pingdom for real-time monitoring.

Conclusion

Recap the most effective strategies.

How website speed directly influences user engagement, conversions, and SEO.

Encourage regular testing and updates to maintain fast performance.

WEBSITE: https://www.ficusoft.in/web-designing-training-in-chennai/

0 notes

compilator · 2 years ago

Text

Compilator: Week in Review #1

Web development

New way to create modals using HTML only

Which open-source monospaced font is best for coding?

Drawing a star with DOMMatrix

The State of HTML 2023 survey is now open!

What are JWTs/Jots/JSON Web Tokens?

From WebGL to WebGPU

Ultimate solution for generating placeholder images

Productivity

What Causes Bad CLS and How to Fix it?

Get All That Network Activity Under Control with Priority Hints

Css

The Path To Awesome CSS Easing With The linear() Function

A (more) Modern CSS Reset

CSS Findings From The Threads App: Part 2

Responsive type scales with composable CSS utilities

JavaScript

Speeding up the JavaScript ecosystem - Polyfills gone rogue

How to Code Dark Mode for Google Sheets with Apps Script and JavaScript

Understanding the JavaScript Modulo Operator

The Origins of TypeScript: A Documentary

React

Optimizing Provider Context Usage in React

Build Your Own ChatGPT Clone with React and the OpenAI API

How to Build an Accordion Component with React.js

v0: “AI tool from Vercel that works like Midjourney for React, that is, it issues code snippets based on your requests (prompts)

Bootstrap a React app with smol developer

Understanding Props in React — A Comprehensive Guide

Vue

Clean Layout Architecture for Vue Applications

Optimizing Vue.js apps with web workers

7 Quick Tips about Vue Styles You (Might) Didn’t Know

Svelte

Introducing runes

Exploring Astro and Svelte vs. SvelteKit: A comparative guide

How to Build an Etch-A-Sketch App with Svelte

Libs & Plugins

Benchmarks for JS minifiers: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify

MouseMove - JavaScript mouse cursor behavior automation for web presentation

Browser

Nue JS is an extremely small (2.3kb) JavaScript library for creating web interfaces. This is the core of the future Nue ecosystem. It is similar to Vue.js, React.js or Svelte, but without hooks, effects, props, portals, watchers, providers, injects, suspension and other unusual abstractions in your way!

swup 4 - a universal library for creating transitions between pages. It manages the full page load life cycle and seamlessly adds animation between the current and next pages.

What's new in DevTools (Chrome 118)

WebKit features in Safari 17.0

---------

Image by vectorpocket on Freepik

#frontend #webdevelopment #javascript #css #vue #angular #svelt #browser #react #java script

0 notes

nightpool · 3 years ago

Text

Riddle me this, Batman:

I have a library from a vendor that’s already been minified and obfuscated. If I load it using the standard babel loader, it can’t find the commonjs module variable, because babel-loader turns it into an es6 module and breaks its “magic” commonjs/amd/umd/requirejs detection. But if I don’t use babel-loader, then terser can’t minify the js file it gets included in, because its “minified” form uses optional chaining!

Can you solve the riddle of my webpack config file?

25 notes · View notes

jerric · 6 years ago

Text

Svelte + Tailwind + Storybook Starter Template

First of all, here's the link to the Github repo, go ahead and start working on your project than fiddle with the configurations. Trust me that takes a hell lot of time.

Visit this website to see the outcome: Svelte + TailwindCSS + Storybook

// Quickstart npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project cd my-svelte-project yarn yarn dev yarn stories

Svelte and TailwindCSS is an awesome combination for Frontend development, but sometimes the setup seems a bit non intuitive, especially when trying to try out this awesome combination. When integrating Storybook, which is another awesome tool for UI Component development and documentation, there is no obvious place to get how it's done. This repo was made to address just that!

You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.

What do you get in this repo

A fully functional Svelte + TailwindCSS integration with side-by-side implementation of independent Storybook

Storybook with 5 essential Addons

Storybook populated with basic examples of Svelte + TailwindCSS

Addons

Accessibility Addon

Accessibility Addon - Colorblindness Emulation

Actions Addon

Notes Addon

Source Addon

Viewport Addon

Svelte + TailwindCSS + Storybook

Storybook is an open source tool for developing JavaScript UI components in isolation

Svelte is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.

TailwindCSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Steps to build

Clone this repo git clone https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git

Go to the directory cd svelte-storybook-tailwind

Install dependencies yarn

To develop your Svelte App: yarn dev

To develop UI components independent of your app: yarn stories

Documentations

Svelte - API and Tutorial

TailwindCSS - Docs and Tutorial

Storybook - Docs and Tutorial (No Svelte Yet!)

Steps to build it all by yourself and some tips [Warning: It's lengthy]

Instantiate Svelte App

Start the template file using npx degit sveltejs/template svelte-storybook-tailwind

Go to the directory cd svelte-storybook-tailwind

Install dependencies yarn

Try run the svelte app yarn dev

Add Tailwind into the project

Install dependencies: yarn add -D tailwindcss @fullhuman/postcss-purgecss autoprefixer postcss postcss-import svelte-preprocess

Change the rollup config as shown:

import svelte from 'rollup-plugin-svelte'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import postcss from 'rollup-plugin-postcss'; import autoPreprocess from 'svelte-preprocess'; const production = !process.env.ROLLUP_WATCH; export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/bundle.js', }, plugins: [ svelte({ preprocess: autoPreprocess({ postcss: true, }), // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file — better for performance css: css => { css.write('public/bundle.css'); }, }), postcss({ extract: 'public/utils.css', }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration — // consult the documentation for details: // https://github.com/rollup/rollup-plugin-commonjs resolve({ browser: true, dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'), }), commonjs(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, }, };

Add tailwind config using the command npx tailwind init

Add PostCSS config ./postcss.config.js as follows:

Build the project with some TailwindCSS utilities yarn dev

Add Storybook into the Svelte Project

Add Storybook dependencies yarn add -D @storybook/svelte

Add 5 commonly used Storybook Addons:

Source: yarn add -D @storybook/addon-storysource

Actions: yarn add -D @storybook/addon-actions

Notes: yarn add -D @storybook/addon-notes

Viewport: yarn add -D @storybook/addon-viewport

Accessibility: yarn add @storybook/addon-a11y --dev

Create an addon file at the root .storybook/addons.js with the following content and keep adding additional addons in this file.

import '@storybook/addon-storysource/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-notes/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-a11y/register';

Create a config file at the root .storybook/config.js with the following content:

import { configure, addParameters, addDecorator } from '@storybook/svelte'; import { withA11y } from '@storybook/addon-a11y'; // automatically import all files ending in *.stories.js const req = require.context('../storybook/stories', true, /\.stories\.js$/); function loadStories() { req.keys().forEach(filename => req(filename)); } configure(loadStories, module); addDecorator(withA11y); addParameters({ viewport: { viewports: newViewports } });

Add tailwind configs in the webpack.config.js under .storybook and also accommodate for Source addon:

Create the postcss.config.js under .storybook:

var tailwindcss = require('tailwindcss'); module.exports = { plugins: [ require('postcss-import')(), tailwindcss('./tailwind.config.js'), require('autoprefixer'), ], };

Make sure you have babel and svelte-loader dependencies yarn add -D babel-loader @babel/core svelte-loader

Add npm script in your package.json

{ "scripts": { // Rest of the scripts "stories": "start-storybook", "build-stories": "build-storybook" } }

Add a utils.css file under storybook/css/ and make sure you import 'utils.css' in your stories.js files:

/* Import Tailwind as Global Utils */ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Write your Svelte component in storybook\components and yes you can use your regular .svelte file. The only thing is that you cant use templates in a story yet, not supported, but yes you can compose other components together. For the starter pack lets just create a clickable button.

Write your stories in storybook/stories and you can name any number of story file with <anything>.stories.js, for the starter package we can create stories of Button with the readme notes at <anything>.stories.md. Note: reference the css here to make sure that tailwind is called by postcss:

import '../../css/utils.css'; import { storiesOf } from '@storybook/svelte'; import ButtonSimple from '../../components/buttons/button-simple.svelte'; import markdownNotes from './buttons.stories.md'; storiesOf('Buttons | Buttons', module) //Simple Button .add( 'Simple', () => ({ Component: ButtonSimple, props: { text: 'Button' }, on: { click: action('I am logging in the actions tab too'), }, }), { notes: { markdown: markdownNotes } }, )

Write your own Documentation for the Component which will <anything>.stories.md :

# Buttons _Examples of building buttons with Tailwind CSS._ --- Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities. Here are a few examples to help you get an idea of how to build components like this using Tailwind.

Run your storyboard yarn stories and you'll see this:

You can add more addons and play around with them.

That's a wrap!

#template #storybook #svelte #tailwindcss #ui #component #frontend #webdevelopment #postcss #purgecss #autoprefixer #node #javascript #css #html5

2 notes · View notes

junctiongreys · 3 years ago

Text

Npm minify

NPM MINIFY HOW TO

NPM MINIFY INSTALL

NPM MINIFY CODE

Webpack 5.5.0 compiled successfully in 6388 ms If you build the project now ( npm run build), you should notice that CSS has become smaller as it's missing comments and has been concatenated: ⬡ webpack: Build FinishedĪsset vendor.js 126 KiB (name: vendor ) (id hint: commons ) 2 related assetsĪsset main.js 3.32 KiB (name: main ) 2 related assetsĪsset 34.js 247 bytes 2 related assetsĪsset main.css 730 bytes (name: main ). const TerserPlugin = require ( "terser-webpack-plugin" ) To attach it to the configuration, define a part for it first: To get started, include the plugin to the project: npm add terser-webpack-plugin -develop To tune the defaults, we'll attach terser-webpack-plugin to the project so that it's possible to adjust it. In webpack, minification process is controlled through two configuration fields: optimization.minimize flag to toggle it and optimization.minimizer array to configure the process. Modifying JavaScript minification process #

NPM MINIFY CODE

Rewriting the parameters breaks code unless you take precautions against it in this case. For example, Angular 1 expects specific function parameter naming when using modules. Unsafe transformations can break code as they can lose something implicit the underlying code relies upon. Good examples of this include renaming variables or even removing entire blocks of code based on the fact that they are unreachable ( if (false)). Safe transformations do this without losing any meaning by rewriting code. The point of minification is to convert the code into a smaller form.

NPM MINIFY HOW TO

Compared to UglifyJS, the earlier standard for many projects, it's a future-oriented option.Īlthough webpack minifies the output by default, it's good to understand how to customize the behavior should you want to adjust it further or replace the minifier. Terser is an ES2015+ compatible JavaScript-minifier.

In package.Since webpack 4, the production output gets minified using terser by default.

NPM MINIFY INSTALL

It is possible to install two copies - global and local - like this: npm install uglify-js -global -save-dev The advantage of using -save-dev is that the dependency is listed in package.json so that when your code is placed on a different machine, running npm install installs all dependencies (except global ones). If you install globally with npm install -global uglifyjs, you don’t have to do this. node_modules/.bin/uglifyjs instead of just uglifyjs. node_modules/bin and if you want to run it directly from the command-line you need to write. Note: npm tools installed with -save-dev are located in.

Install in a terminal with npm install -save-dev uglify-js.

Major web browsers will run the minified code but show you the original code when you use their debugger).Ĭonfusingly there are two packages, uglify-js and uglify-es. Uglify can also produce a source map to your original TypeScript or ES6 code (source maps allow you to debug the minified code as if it was the original. Uglify-js is 100 times larger than jsmin ( 1.5MB vs 15KB) but has many more features, is more popular, and is still small compared to WebPack or the TypeScript compiler. "build" : "tsc -declaration & npm run minify" ,

In package.json in the "scripts" section, add a minify script that uses jsmin (replace name with the name of your JavaScript file, not your TypeScript file multiple filenames are allowed):.

Install in a terminal with npm install -save-dev jsmin.

It just removes spaces it does not shorten variable names so it does not provide the smallest possible size. This is a tiny (15KB), simple and old minifier, appropriate for simple programs/modules. Parcel’s production mode, parcel build, also uses a minifier. If you’re using webpack to build your code, webpack -p reportedly minifies the application using “UglifyJSPlugin”. tsc -declaration & tsc -removeComments) 1. As of 2018 there is no compiler option to avoid this (at least you can remove comments with "removeComments":true, but if you are producing a d.ts file this will also remove comments from the d.ts file unless you perform a separate comment-removing build that does not produce a d.ts file, e.g. Even if your TypeScript code uses two spaces for indentation and has compact expressions like x+1, the TypeScript compiler produces output with four spaces and adds spaces between things like x + 1. Unfortunately, the TypeScript compiler not only cannot produce minified output, it proactively wastes space. Obfuscators are closely related - their goal is to make code harder to understand. For this reason, we have minifiers to remove spaces, remove newlines and shorten variable names to a single character. Since web apps are sent over the internet, it’s good to keep them small so that the app loads quickly. Leave a comment Four ways to minify your code

#Npm minify

0 notes