前端 9 大性能优化策略（面试必备）

# 前端 9 大性能优化策略（面试必备）

1. 代码压缩与混淆

• CSS压缩：使用工具如cssnano

  npm install cssnano -Dnpx cssnano input.css output.css

• JS压缩：推荐terser

  npm install terser -Dnpx terser input.js -o output.js -c -m

• Webpack生产模式自动压缩

  module.exports = {  mode: \'production\' // 自动启用压缩}

2. 资源合并与Tree Shaking

• 文件合并策略：

  // webpack.config.jsoptimization: {  splitChunks: {  chunks: \'all\' }}

• Tree Shaking：

  // package.json{  \"sideEffects\": false // 或指定有副作用的文件 \"sideEffects\": [\"*.css\", \"*.global.js\"]}

3. 图片优化方案

// 响应式图片示例<picture> <source srcset=\"image.webp\" type=\"image/webp\"> <source srcset=</