前端应用中的JavaScript执行效率优化指南

# 使用 Terser 压缩代码
terser main.js -o main.min.js -c -m

// 使用动态导入实现懒加载
import('./module.js').then(module => {
  module.init();
});

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

# Nginx 配置示例
gzip on;
gzip_types text/javascript application/javascript;

// 使用 IIFE 创建局部作用域
(function() {
  const localVar = 'This is a local variable';
})();

// 优化前
for (let i = 0; i < array.length; i++) {
  process(array.length);
}

// 优化后
const len = array.length;
for (let i = 0; i < len; i++) {
  process(len);
}

// 将事件绑定到父元素上
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    // 处理按钮点击事件
  }
});

// 创建 Web Worker
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(event) {
  console.log('Result:', event.data);
};

// 使用 DocumentFragment 批量添加元素
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

// 不推荐：修改后立即读取
element.style.width = '100px';
console.log(element.offsetHeight);

// 推荐：先读取，再修改
const height = element.offsetHeight;
element.style.width = '100px';

// React 示例
function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// 清除定时器
const timer = setInterval(() => {
  // ...
}, 1000);

// 在适当的时候清除
clearInterval(timer);

const cache = new WeakMap();
function process(obj) {
  if (!cache.has(obj)) {
    cache.set(obj, compute(obj));
  }
  return cache.get(obj);
}

// Webpack 配置示例
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};