Static resource optimization solution

Author：Chuan Chen 阅读数：14113人阅读分类： Node.js

The Necessity of Static Resource Optimization

Static resource optimization is a critical aspect of enhancing web application performance. Koa2, as a lightweight Node.js framework, provides a flexible middleware mechanism that efficiently handles static resource requests. Through reasonable optimization strategies, it can significantly reduce page load times, decrease server pressure, and improve user experience.

Static Resource Caching Strategies

Strong Caching and Negotiation Caching

const path = require('path')
const static = require('koa-static')
const mount = require('koa-mount')

app.use(mount('/public', static(
  path.join(__dirname, 'public'), 
  {
    maxAge: 30 * 24 * 60 * 60 * 1000, // 30-day cache
    immutable: true // Enable immutable resource caching
  }
)))

Strong caching is implemented via the Cache-Control and Expires headers, while negotiation caching relies on Last-Modified/If-Modified-Since and ETag/If-None-Match. The Koa-static middleware includes built-in ETag generation and Last-Modified handling.

Cache Busting Techniques

// Add hash during the build process
app.use(static('dist', {
  setHeaders: (res) => {
    res.setHeader('Cache-Control', 'public, max-age=31536000')
  }
}))

For frequently updated resources, it is recommended to use content hashes in filenames (e.g., main.a1b2c3d4.js) combined with long-term caching strategies. Build tools like Webpack can automatically generate these hashes.

Resource Compression and Merging

Gzip/Brotli Compression

const compress = require('koa-compress')

app.use(compress({
  threshold: 2048,
  gzip: {
    level: 9
  },
  br: false // Disable Brotli (requires Node 11.7.0+)
}))

The Koa-compress middleware supports real-time response compression. It is advisable to enable compression for text resources (HTML/CSS/JS), as binary files like images are typically already compressed.

Resource Merging Strategies

// Use build tools to merge files
// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000
    }
  }
}

Merge small files to reduce HTTP requests, but balance this with cache efficiency. Webpack's code-splitting feature can intelligently split and merge resources.

Static Resource CDN Acceleration

CDN Configuration Example

const staticCache = require('koa-static-cache')

app.use(staticCache({
  prefix: '/cdn',
  dir: '/opt/cdn',
  maxAge: 365 * 24 * 60 * 60,
  buffer: true
}))

Implement edge caching with koa-static-cache and integrate with CDN services:

Configure a custom domain (e.g., cdn.example.com)
Enable HTTP/2 protocol
Set reasonable caching rules
Enable intelligent compression

Image Optimization Solutions

Responsive Image Handling

const sharp = require('sharp')

router.get('/image/:size/:name', async (ctx) => {
  const { size, name } = ctx.params
  const [width, height] = size.split('x')
  
  ctx.body = await sharp(`uploads/${name}`)
    .resize(Number(width), Number(height))
    .webp({ quality: 80 })
    .toBuffer()
})

Use the Sharp middleware to implement:

Dynamic resizing
WebP format conversion
Quality compression
Lazy loading support

Lazy Loading Implementation

<img data-src="/images/hero.jpg" class="lazyload" alt="...">

<script>
document.addEventListener("DOMContentLoaded", () => {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"))
  
  if ("IntersectionObserver" in window) {
    const lazyImageObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const lazyImage = entry.target
          lazyImage.src = lazyImage.dataset.src
          lazyImageObserver.unobserve(lazyImage)
        }
      })
    })
    
    lazyImages.forEach((lazyImage) => {
      lazyImageObserver.observe(lazyImage)
    })
  }
})
</script>

Font File Optimization

Font Subsetting

const fontmin = new Fontmin()
  .src('fonts/SourceHanSansCN-Regular.ttf')
  .use(Fontmin.glyph({
    text: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  }))
  .dest('build/fonts')

Use the Fontmin tool to:

Extract necessary character sets
Generate WOFF2 format
Set correct MIME types

Font Loading Strategies

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Preload critical fonts in the critical CSS:

<link rel="preload" href="/fonts/important.woff2" as="font" crossorigin>

Build Tool Optimization

Webpack Configuration Example

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

Key optimization points:

Persistent caching (contenthash)
Code splitting (SplitChunksPlugin)
Tree Shaking
Scope Hoisting

Resource Preloading Techniques

Resource Hints Implementation

<!-- DNS prefetching -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- Preconnect -->
<link rel="preconnect" href="https://api.example.com" crossorigin>

<!-- Preload critical resources -->
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

<!-- Prefetch non-critical resources -->
<link rel="prefetch" href="/images/next-bg.jpg" as="image">

Route-Based Code Splitting

// Dynamically import components
const ProductPage = () => import(/* webpackPrefetch: true */ './ProductPage.vue')

// Koa route configuration
router.get('/products/:id', async (ctx) => {
  const product = await getProduct(ctx.params.id)
  await ctx.render('product', { 
    product,
    scripts: [
      { src: `/js/product.chunk.js`, preload: true }
    ]
  })
})

Monitoring and Continuous Optimization

Performance Metrics Collection

// Frontend performance monitoring
window.addEventListener('load', () => {
  const timing = performance.timing
  const metrics = {
    dns: timing.domainLookupEnd - timing.domainLookupStart,
    tcp: timing.connectEnd - timing.connectStart,
    ttfb: timing.responseStart - timing.requestStart,
    fcp: performance.getEntriesByName('first-contentful-paint')[0].startTime,
    lcp: performance.getEntriesByName('largest-contentful-paint')[0].startTime
  }
  
  navigator.sendBeacon('/perf', JSON.stringify(metrics))
})

Automated Optimization Workflow

// Post-build analysis
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html'
    })
  ]
}

Integrated toolchain: