Webpack学习系列(四)代码分割/动态import

795 阅读1分钟


懒加载JS脚本

commonjs:require.ensure

ES6:动态import(目前还没有原生支持,需要babel转换) (if()else{} 中使用import语法)

1. npm install @babel/plugin-syntax-dynamic-import --save-dev

2. babel的配置  “plugins”:["@babel/plugin-syntax-dynamic-import"]

练习

1. 部分代码:只放出了懒加载部分

2. npm run build

红色箭头部分为import文件

懒加载的脚本通过jsonp的方式加载