webpack性能优化——从产出代码角度优化（提升产品性能）

优化产出代码-产品性能

• 小图片base64编码（见上一篇webpack性能优化——从构建速度角度优化（提升开发体验和效率））
• bundle加hash见上一篇webpack性能优化——从构建速度角度优化（提升开发体验和效率））
• 懒加载见上一篇webpack性能优化——从构建速度角度优化（提升开发体验和效率））
• 提取公共改代码见上一篇webpack性能优化——从构建速度角度优化（提升开发体验和效率））
• IgnorePlugin见上一篇webpack性能优化——从构建速度角度优化（提升开发体验和效率））
• 使用CDN加速

  • 配置生产环境静态文件的url前缀（如cdn域名）

  • 也可以设置图片的cdn地址

  • 把文件丢上cdn

• mode使用production
  • webpack4之后配置mode为production会自动开启代码压缩
  • vue react等会自动删掉调试代码（如开发环境的warning）
  • 会自动启动Tree-Shaking
    • 会把没有用的代码删掉

      • ES6 Module才能让Tree-Shaking生效，Commonjs无效

      • ES6 Module和Commonjs区别

        • ES6 Module静态引入，编译时引入
        • Commonjs动态引入，执行时引入
        • 只有ES6 Module才能静态分析，实现Tree-Shaking
• Scope Hosting

  • 

  • 默认打包结果

  • 开启Scope Hosting
    

  • 优点

    • 代码体积更小
    • 创建函数作用域更少
    • 代码可读性更好

  • 配置