webpack | 进阶用法2：代码分割和动态引入的实现方式-一一网

这是我参与更文挑战的第28天，活动详情查看：更文挑战

[webpack系列文章连载中…]

Webpack可以将代码分割为chunks（语块），当代码运行到需要它们的时候再加载。

使用场景：

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

懒加载JS脚本的方式：

1. CommonJS：require.ensure()

require.ensure([],function(){
   var data = require('./test.js')	
})
复制代码

require.ensure函数是一个代码的分割线，表示回调函数里的require是想要分割出去的文件，形成一个webpack单独打包的js文件。第一个参数[]，表示的是require.ensure所依赖的其他异步加载的模块。当代码执行时，先下载[]内的依赖，当下载完成再执行回调函数，下载require的所指模块执行。

2. ES6 动态import

目前还没有原生支持，需要babel转换。

// 1. 安装babel插件
npm install @babel/plugin-syntax-dynamic-import --save-dev

// 2. 配置.babelrc文件声明
{
    "presets":[
  	[
    	"@babel/preset-env"
    ],
    "@babel/preset-react"
  ],
   "plugins":[
       "@babel/plugin-syntax-dynamic-import"
   ]
}

// 3. 用法
// 3.1 声明文件test.js
export default {a:1}
// 3.2 引用文件
mounted(){
  import('./test.js').then(res=>{
     console.log(res.default)
  })
}
复制代码

3. 模拟动态引入

var dynamicImport = (src,callback)=>{
    var head = document.getElementsByTagName("head")[0]
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src;
    head.insertBefore(script, head.firstChild);
    // 监听script加载事件
    script.onload = script.onreadystatechange = function() {
      if (!this.readyState || this.readyState === "loaded" ||   this.readyState === "complete") {
    	  console.log("test.js文件加载完成");
          typeof callback === 'function' && callback()
      }
   }  
}
复制代码