代码分割和动态 import

代码分割的意义 对于大的 web 应用来讲，将所有的代码都放在一个文件中是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成 chuncks（语块），当代码运行到需要它们的时候再进行加载。 懒加载 js 脚本 ES6：动态 import 需要安装 babel 插件，目前还没有原生支持。

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

在 .babelrc 中配置

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

代码分割的效果：有一个 js 文件，在这个 js 中使用了动态分割的语法，打包时会额外去分割一个 js 文件，打开一个页面，实际访问后，通过某个触发器（比如按钮，鼠标滑动到页面某一部分等）通过代码去请求另一个 js 文件。