webpack ensure有人称它为异步加载，也就人称为代码切割。其实它就是把js模块给独立导出一个js文件，然后使用这个模块的时候，webpack会构造script dom元素，又浏览器发起异步请求这个js文件
webpack ensure的原理
它就是把一些js模块独立出一个js文件，需要用到的时候，再创建一个script对象，加入到document.head对象中即可。浏览器自动帮我们发起请求，去请求这个js文件，再写个回调，去定义得到这个js文件后，需要做什么业务逻辑操作
main.js依赖3个js
·A.js是封装aBtn按钮点击后才执行的逻辑
·B.js是封装bBtn按钮点击后才执行的逻辑
·vue.js是封装了main.js要利用的包
针对上面的需求，优化方案
假设A.js B.js vue.js都是非常大的文件，且都不是main.js必须有的，即未来可能发生的操作，那么我们把它们利用异步加载，当发生的时候再去加载就行了。
vue.js是main.js立即马上依赖的工具箱，但是它又非常的大，所以将其配置打包成一个公共模块，利用浏览器的并发加载，加快下载速度。构思完成，开始实现。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<button id="aBtn">Abtn</button>
<button id="bBtn">Bbtn</button>
</body>
</html>
main.js
import Vue from 'vue'
console.log(Vue)
document.getElementById('aBtn').onclick=function () {
//异步加载A.js
require.ensure([],function () {
var A=require("./A.js");
alert(A.data);
})
}
document.getElementById('bBtn').onclick=function () {
//异步加载B.js
require.ensure([],function () {
var B=require("./B.js");
alert(B.data);
})
}
A.js（B.js同理）
var A={
"data":"Hello A"
}
module.exports =A;
webpack.config.js配置
var path = require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');//引入插件
const webpack=require('webpack');
const packagejson=require('./package.json');
module.exports={
//入口
entry:{
//可以有多个入口，也可以有一个，如果是一个就默认从这一个入口开始解析
"main":"./src/main.js",
"util":Object.keys(packagejson.dependencies)//获取生产环境依赖
},
output:{
path:path.resolve('./dist'),//相对转绝对
filename:'[name].js'
},
watch:true,//文件监视改动 自动产出build.js
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename: '[name].js'
}),
new HtmlWebpackPlugin({
//chunks主要用于多入口文件，当你有多个入口文件，它就会编译生成多个打包后的文件，chunks就能选择你要使用哪个文件
chunks:['common','util','main'],
template:"./src/index.html",//参照物
inject: true,
//inject:true|body|head
}),
]
}
网友评论