[实践]性能优化

检测工具(衡量标准)

webpack-bundle-analyzer

生成 stats.json

优化打包时间

before: ✨ Done in 45.81s.
after:

优化打包输出资源

  intervals.sort((a, b) => a.start - b.start);
  let res = [intervals[0]];
  for (let i=1; i<intervals.length;i++) {
    let prev = res[res.length -1];
    let cur = intervals[i];
    // 有重叠
    if (prev.end >= cur.start) {
      res[res.length - 1] = {
        start: prev.start, 
        end: Math.max(prev.end, cur.end)
      }
    } else {
      res.push(cur);
    }
  }
  return res;

extract-text-webpack-plugin 压缩css

去除多余css purifycss

purgecss-webpack-plugin插件压缩CSS