使用过vue的童鞋 可能知道 路由懒加载 图片懒加载
懒加载 说的这么高大上 其实就是 在我们需要的时候加载 不需要的时候先不要加载 减轻首次加载服务器的压力 和用户的体验
但是vue脚手架 说到底底层还是基于webpack 构建的
进来就来讲讲 webpack中的懒加载问题
创建了一个具有基础功能的webpack 项目
需求:我在页面上创建一个按钮 当点击按钮的时候 加载这个文件 并不是一开始就加载
在src/index.js文件中
let button=document.createElement('button');
button.addEventListener('click',function(){
import('./util.js').then(data=>{ // 懒加载
console.log(data.default) //拿到加载的文件里面的数据信息 输出到控制台上
})
})
button.innerHTML="Click123"
document.body.appendChild(button);
这样的话当前文件夹下还有一个 util.js文件
export default '我是用来测试用的' // 导出一句话
这样就可以了 答案是当然不可以了 还需要一个babel插件
npm install @babel/plugin-syntax-dynamic-import -S
{
test:/\.js$/i,
exclude:/node_modules/,
include:path.resolve('src'),
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
],
plugins:[ // 配置到你webpack的babel-loader的options中
'@babel/plugin-syntax-dynamic-import'
]
}
}
}
这样才达到了 懒加载的效果 npm run dev 就可以点击按钮的时候 控制台上出来那句话