Web 開発者向けの高度なコンテンツ優先順位付けテクノロジー

npm install purgecss critical

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html'],
  css: ['./src/css/main.css'],
  output: './dist/css/',
};

const critical = require('critical').stream;
const purgecss = require('@fullhuman/postcss-purgecss');
const postcss = require('postcss');
// 使用 PurgeCSS 处理 CSS 文件
postcss([
  purgecss(require('./purgecss.config.js')),
])
  .process(cssContent, { from: 'src/css/main.css', to: 'dist/css/main.min.css' })
  .then((result) => {
    // 使用 Critical 内联关键 CSS
    gulp.src('src/*.html')
      .pipe(critical({ base: 'dist/', inline: true, css: ['dist/css/main.min.css'] }))
      .pipe(gulp.dest('dist'));
  });

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
// 动态导入的使用
async function loadNonCriticalModule() {
  const nonCriticalModule = await import('./nonCriticalModule.js');
  nonCriticalModule.run();
}

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Sample image">
</picture>

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<!-- 预取非关键资源 -->
<link rel="prefetch" href="non-critical-image.jpg" as="image">
<!-- 预连接到重要的第三方来源 -->
<link rel="preconnect" href="https://fonts.gstatic.com">

// workbox.config.js
module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{html,js,css,woff2}'],
  swDest: 'dist/sw.js',
};
// 使用 Workbox CLI 生成 Service Worker
npx workbox generateSW workbox.config.js