webpack优化之代码分割splitChunck
乔文飞 Lv8
2020-12-21 14:06:00

代码分割

  • splitChunck
  • 动态引用
    • 适用场景：抽离相同代码到一个共享块
    • 脚本懒加载，使得初始下载代码更小
  • 懒加载JS脚本方式
    • CommonJS: require.ensure
    • ES6: 动态import（需要babel支持，@babel/plugin-syntax-dynamic-import)
1
2
3
4
// 配置.babelrc
"plugins": [
    ["@babel/plugin-syntax-dynamic-import"],
]

dist代码通过window[‘webpackJsonp’]来获取对应脚本

  • 本文标题：webpack优化之代码分割splitChunck
  • 本文作者：乔文飞
  • 创建时间：2020-12-21 14:06:00
  • 本文链接：http://www.feidom.com/2020/12/21/webpack优化之代码分割/
  • 版权声明：本博客所有文章为作者学习笔记，有转载其他前端大佬的文章。转载时请注明出处。