静态资源内联与外联策略

静态资源内联与外联策略是前端性能优化的重要手段，尤其在Vite.js这类现代构建工具中，合理选择资源加载方式直接影响页面加载速度和用户体验。内联适合关键路径资源，外联则利于缓存复用，两者结合能显著提升应用性能。

资源内联的优势与实现

内联资源直接将内容嵌入HTML或CSS中，减少HTTP请求数量。Vite默认内联小于4KB的静态资源，可通过build.assetsInlineLimit配置阈值。典型场景包括关键CSS和首屏必需的SVG图标：

// vite.config.js
export default defineConfig({
  build: {
    assetsInlineLimit: 4096 // 4KB阈值
  }
})

CSS内联示例：

<style>
  /* 通过PostCSS处理后的关键CSS */
  .hero-banner { background: url('data:image/svg+xml;base64,PHN2Zy...') }
</style>

JS内联的实践方式：

// 使用import.meta.url获取内联资源
const svg = new URL('./icon.svg', import.meta.url).href

外联资源的适用场景

外联资源通过独立文件加载，适合以下情况：

• 较大的图片/字体文件
• 被多个页面共享的JS/CSS
• 需要长期缓存的第三方库

Vite自动处理资源外联，生产环境会添加哈希指纹：

<!-- 构建后自动生成版本化文件名 -->
<script type="module" src="/assets/index.3a7b2e.js"></script>

通过build.rollupOptions可精细化控制：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
})

混合策略的实践方案

关键CSS内联+异步加载

<!-- 内联首屏关键样式 -->
<style>/* 压缩后的关键CSS */</style>

<!-- 异步加载剩余样式 -->
<link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'">

图片资源的智能处理

// 动态判断资源大小选择内联/外联
function getImageUrl(path) {
  return import.meta.env.PROD && fileSize(path) > 4096 
    ? `/assets${path}`
    : `data:image/svg+xml;base64,${base64Encode(path)}`
}

第三方库的分离打包

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          lodash: ['lodash-es'],
          ui: ['ant-design-vue']
        }
      }
    }
  }
}

Vite特有的优化技巧

预构建依赖处理

.vite/deps目录缓存预构建的第三方依赖，显著提升冷启动速度。可通过optimizeDeps配置：

export default {
  optimizeDeps: {
    include: ['lodash.throttle'],
    exclude: ['vue-demi']
  }
}

WASM资源内联

Vite 4+支持WebAssembly的内联加载：

import init from './module.wasm?init'
init().then(instance => {
  instance.exports.test()
})

Worker脚本处理

通过专用查询参数处理Web Worker：

// 外联Worker
const worker = new Worker(new URL('./worker.js', import.meta.url))

// 内联Worker
const inlineWorker = new Worker(
  URL.createObjectURL(
    new Blob([code], { type: 'application/javascript' })
  )
)

性能指标对比测试

使用Lighthouse进行策略对比（测试环境：1Mbps带宽，中端移动设备）：

缓存策略的深度优化

外联资源配合强缓存能达到最佳效果：

# Nginx配置示例
location /assets {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Vite生成的manifest文件可用于版本控制：

import manifest from './dist/manifest.json'

function getHashedPath(name) {
  return manifest[name] || name
}

现代图像格式的自动化处理

Vite插件生态支持图像自动优化：

import viteImagemin from 'vite-plugin-imagemin'

export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      webp: { quality: 75 }
    })
  ]
}

配合图片组件实现按需转换：

<script setup>
import { getImage } from 'vite-plugin-image'

const image = getImage({
  src: './photo.jpg',
  transforms: [
    { width: 320, format: 'webp' },
    { width: 640, format: 'avif' }
  ]
})
</script>

<template>
  <picture>
    <source :srcset="image.sources" type="image/webp">
    <img :src="image.fallback" alt="示例图片">
  </picture>
</template>

动态加载策略的实现

基于网络条件选择加载方式：

// 使用Network Information API
const useFastConnection = navigator.connection?.effectiveType === '4g'

async function loadResource(url) {
  if (useFastConnection) {
    return import(/* @vite-ignore */ url)
  } else {
    const res = await fetch(url)
    return new Function(await res.text())()
  }
}

构建产物的可视化分析

使用rollup-plugin-visualizer识别优化点：

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({
      open: true,
      gzipSize: true
    })
  ]
}

生成的treemap图可直观显示：

▓▓▓▓▓ 45% lodash
▓▓▓ 30% react
▓▓ 15% component-library
▓ 10% business-code

服务端渲染的特殊处理

SSR模式下需要调整内联策略：

export default {
  ssr: {
    noExternal: ['@heroicons/vue'],
    external: ['lodash']
  }
}

针对SSR的CSS处理：

// 服务端禁用CSS提取
export default {
  css: {
    modules: {
      generateScopedName: '[name]__[local]'
    }
  }
}