webpack代码分割之动态 import

1、意义

对于的 Web 应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的
某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成
chunks（语块），当代码运⾏到需要它们的时候再进行加载

 

2、方式

 

• 抽离相同代码到一个共享块
• 脚本懒加载，使得初始下载的代码更小

3、实现懒加载

CommonJS：require.ensure
ES6：动态 import（目前还没有原生支持持，需要 babel 转换）

 

4、使用动态 import

安装 babel 插件
 

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

babel配置

{
"plugins": ["@babel/plugin-syntax-dynamic-import"],
}