Advanced Development Guides

Performance Optimizations

Learn how to make your site load faster and run smoother.

Critical CSS Inlining

<style>
  /* Only the styles needed for above‑the‑fold rendering */
  body{font-family:sans-serif;margin:0}
  header{background:#0066cc;color:#fff;padding:1rem}
</style>
<link rel="stylesheet" href="styles.css">

Lazy Loading Images

document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if(entry.isIntersecting){
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        obs.unobserve(img);
      }
    });
  });
  lazyImages.forEach(img => observer.observe(img));
});

Security Best Practices

Protect your application from common threats.

Content Security Policy (CSP)

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' data:;

Subresource Integrity (SRI)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
        integrity="sha384-xxxxxx" crossorigin="anonymous"></script>

Advanced Webpack Configuration

Fine‑tune your build pipeline for production.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {test:/\.js$/, exclude:/node_modules/, use:'babel-loader'},
      {test:/\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader']},
      {test:/\.(png|jpe?g|gif|svg)$/, type:'asset'}
    ]
  },
  optimization: {
    splitChunks: {chunks:'all'},
    runtimeChunk: 'single'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({filename:'[name].[contenthash].css'})
  ]
};

Service Workers & Progressive Web Apps

Enable offline support and installable web apps.

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('static-v1').then(cache => 
      cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/offline.html'
      ])
    )
  );
});

self.addEventListener('fetch', e => {
  if (e.request.mode === 'navigate') {
    e.respondWith(
      fetch(e.request).catch(() => caches.match('/offline.html'))
    );
  } else {
    e.respondWith(
      caches.match(e.request).then(resp => resp || fetch(e.request))
    );
  }
});

Testing Strategies

Combine unit, integration, and end‑to‑end tests.

Jest + React Testing Library

import {render, screen} from '@testing-library/react';
import App from './App';

test('renders welcome message', () => {
  render();
  expect(screen.getByText(/welcome/i)).toBeInTheDocument();
});

Cypress E2E Test

describe('Login Flow', () => {
  it('allows a user to login', () => {
    cy.visit('/login');
    cy.get('input[name=email]').type('user@example.com');
    cy.get('input[name=password]').type('Password123{enter}');
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, User');
  });
});