23、webpack优化(8)——懒加载(动态加载)

懒加载

在这里的懒加载，其实就是按需加载（动态加载）。需要对webpack进行相关配置。

懒加载案例

1. 案例情景：

当我点击按钮的时候，需要动态去加载resource.js，并读取该文件导出的内容

//index.js
/*在页面上有一个按钮，点击按钮去加载资源resource.js*/
let button = document.createElement('button');

button.innerHTML = "点击";

button.addEventListener('click',function(){
 console.log('click');
 //es6草案中的语法,利用jsonp实现动态加载文件
 //直接使用不支持，需要利用语法动态导入的插件@babel/plugin-syntax-dynamic-import
 //vue的懒加载  react的懒加载都是这个原理，打包的时候会打包好resource.js文件，然后按需去动态加载
 import('./resource.js').then(data => {
  console.log(data.default);//数据是放在data的default属性里的
 })
});

document.body.appendChild(button);

//resource.js
export default 'yuhuaResource';

2. 在上述代码中，直接使用import()去动态加载资源，是es6草案中语法，并不是正式语法，所以直接使用会报错，需要配置相关的语法动态导入的插件@babel/plugin-syntax-dynamic-import，并在webpack中做简单配置:

module.exports = {
 ...
 module:{
  rules:[
   {
    test:/\.js$/,
    use:{
     loader:'babel-loader',
     options:{
      presets:[
       '@babel/preset-env',
       '@babel/preset-react'
      ],
      plugins:[
       '@babel/plugin-syntax-dynamic-import'
      ]
     }
    }
   }
  ]
 },
 ...
}

3. 配置完后，import()动态加载返回的是一个promise，得到的数据是存在.then的回调函数的data.default属性中的。