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

梁龙先森

关注

发布于: 2021 年 02 月 01 日

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.jsexport 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()  	}	}  }