webpack 代码分割，动态import

代码分割的意义

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

使用的场景

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

懒加载 JS 脚本的方式

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

如何使用动态import

• 安装babel插件
  npm i @babel/plugin-syntax-dynamic-import --save-dev
• 引入在.babelrc文件的根目录下

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

代码分割的效果

使用

import('./text.js') 返回的是一个promise 对象，在需要调用的地方，动态通过import 引入对应的js文件

  loadComponent() {
    import('./text.js').then((Text) => {
      this.setState({
        Text: Text.default
      })
    })
  }