// Nginx配置示例
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
add_header Cache-Control “public, max-age=2592000”;
}

// 动态导入模块
const module = await import(‘./module.js’);
module.doSomething();

function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}

// 使用防抖
const debouncedSearch = debounce(searchFunction, 300);
input.addEventListener(‘input’, debouncedSearch);

function throttle(func, limit) {
let inThrottle;
return function() {
const context = this;
const args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}

// 使用节流
const throttledScroll = throttle(scrollFunction, 100);
window.addEventListener(‘scroll’, throttledScroll);

// 图片懒加载实现
const lazyImages = document.querySelectorAll(‘img[data-src]’);

if (‘IntersectionObserver’ in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
imageObserver.unobserve(image);
}
});
});

lazyImages.forEach(image => {
imageObserver.observe(image);
});
}

module.exports = {
mode: ‘production’,
optimization: {
splitChunks: {
chunks: ‘all’,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: ‘vendors’,
chunks: ‘all’,
},
},
},
},
output: {
filename: ‘[name].[contenthash].js’,
},
};

// 监控页面加载性能
const performanceData = {
navigation: performance.getEntriesByType(‘navigation’)[0],
resources: performance.getEntriesByType(‘resource’),
};

console.log(‘页面加载时间:’, performanceData.navigation.loadEventEnd – performanceData.navigation.start);