# 運(yùn)行Lighthouse的方式
lighthouse https://example.com --view --preset=desktop

const BundleAnalyzerPlugin = require('webpack-bundle-analyser').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
}

// Before
import { heavyCalculation } from './utils';

// After
const heavyCalculation = () => import('./utils/heavyCalculation');

optimization: {
  splitChunks: {
    chunks: 'all',
    maxSize: 244 * 1024, // KB to bytes
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      }
    }
  }
}

// package.json中加入sideEffects聲明
{
  "sideEffects": ["*.css", "*.scss"]
}

// Babel配置避免轉(zhuǎn)換ES模塊語(yǔ)法
{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

// main.js
const worker = new Worker('image-processor.js');

worker.postMessage({ imageData });
worker.onmessage = (e) => {
  updateUI(e.data);
};

// image-processor.js 
self.onmessage = function(e) {
 const result = heavyImageProcessing(e.data.imageData);
 self.postMessage(result);
};

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
 <div style={style}>Row {index}</div>
);

const Example = () => (
 <List height={600} itemCount={1000} itemSize={35} width={300}>
   {Row}
 </List>
);

const ExpensiveComponent = React.memo(({ data }) => {
 const processedData = useMemo(() => 
   expensiveProcessing(data), 
   [data]
 );
 
 return <div>{processedData}</div>;
});

function areEqual(prevProps, nextProps) {
 return prevProps.id === nextProps.id;
}
export default React.memo(MyComponent, areEqual);

const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
   if (entry.isIntersecting) {
     const img = entry.target;
     img.src = img.dataset.src;
     observer.unobserve(img);
   }
 });
});

document.querySelectorAll('img.lazy').forEach(img => {
 observer.observe(img);
});

GET /user/123 → GET /user/123/orders → GET /orders/456/products 

graphql query { 
user(id:"123") 
{ 
orders { 
products {
name price 
} 
} 
} 
} 

self.addEventListener('fetch', 
(event) => { 
    event respondWith( caches match(event request) 
    then((cachedResponse) => 
    { 
    const fetchPromise fetch(event request) then((networkResponse) => { 
    caches open('dynamic-cache') 
    then((cache) cache put(event request networkResponse clone(
        )
    ) return networkResponse 
        
    }) 
    return cachedResponse || fetchPromise 
        
    }) 
    )
    }) 

http { 
    brotli on; 
    brotli_comp_level6; 
    brotli_types text/plain text/css application/json application/javascript;
    
    } 

module exports 
remotes app1' app1@http://localhost3001 remoteEntry js' 
shared react'singleton true requiredVersion'^18'
       
        }
 } 

<link rel="prefetch" href="/assets/chart-component js" as="script"> 

import Perfume from 'perfume js'; 
const perfume new Perfume({ 
    analyticsTracker(
    options metricName data duration)= console 
    log(`${metricName}: ${duration}`); 
    
}
}
); 
    perfume firstPaint() 
   
    perfume firstContentfulPaint() 

const puppeteer require('puppeteer'); 
async function runCheck()
{ 
    
const browser await puppeteer launch(); 
const page await browser newPage(); 
await page trace start(path:'trace json'); 
await page goto(url waitUntil'networkidle0'); 
await page trace stop(); await browser close();
    
} 

setInterval(runCheck3600000);