webpack中使用懒加载

使用过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' 
                        ]
                    }
                }
 }

这样才达到了 懒加载的效果 npｍ run dev 就可以点击按钮的时候 控制台上出来那句话

生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！