这是我参与更文挑战的第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()
}
}
}
4. 附录
浅谈Webpack原理，以及loader和plugin实现（待发布）
webpack进阶用法2：代码分割和动态引入的实现方式
webpack进阶用法3：如果将代码打包成一个通用JS库（待发布）
webpack进阶用法4：构建速度和体积优化策略（待发布）
webpack进阶用法5：持续集成，Travis CLI使用（待发布）
