webpack实现懒加载原理以及如何使用懒加载优化项目

参考：
清晰易懂，可以先看这个：webpack的异步加载原理及分包策略
webpack中的懒加载代码原理解析：https://segmentfault.com/a/1190000020233387

自己的理解写下来的，如果有不对的地方欢迎评论区探讨。

懒加载的原理是利用了webpack的代码分割，它使用异步加载的方式去导入代码。

webpack解析依赖的时候，遇到异步加载的载入方式就会将这段代码分割成一个单独的js文件，等到要动态导入的时候，webpack会构造一个script标签，由浏览器异步请求js文件导入。

可以优化首屏加载，因为webpack会打包会默认只会生成一个bundle文件，但是懒加载之后会把部分代码分割成后续再加载的js文件，减少了主要bundle的体积，加快了加载时间。

怎么才能做到异步导入代码呢？

1. import(’’)
   import ‘./xxxx’ 改成 () => import(‘lazyComponent.js’).then(data=>console.log(data))
   ES的提案，返回一个promise，导入的模块在then中拿到
       用函数引入，而且使用括号括起来，现在只能通过编译去使用， 而且babel为了解析这种异步方式需要引入一个插件：babel-plugin-syntax-dynamic-import。
       使用方式在.babelrc里加：“plugins”: [“syntax-dynamic-import”]
2. require.ensure()
   webpack在编译时会静态地解析代码中的require.ensure()，将里面require的模块添加到一个分开的chunk中。这个新chunk会被webpack通过jsonp来按需加载。

注意：es6模块懒加载和tree-shaking兼容
因为tree-shaking只能解析静态引入的方式，所以动态引入的import(’’)是无法解析它是否有按需加载或者是未使用，可能会出现想要按需引入却把一个包都打包了的情况。
为此，在import(’’)动态加载内最好不要导入第三方依赖之后再处理按需加载情况，如果有这样的就导入自己的组件模块，模块内再按需加载和静态引用依赖，这样就可以正常引入了。

打个比方：

// 这一段代码我只想使用join方法，可是却把整个lodash都打包了。
 setTimeout(import(/* webpackChunkName: "ladash" */'lodash-es').then(_ => {
     
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  }), 1000)

——————————————————————————————————————

懒加载的方式

其实直接import(’’)或者require.ensure就可以达到分割代码懒加载的需求，但是出于代码的美观健壮啊之类的原因，可以使用已经提供的懒加载组件，react-loadable或React.lazy()等等。

1、React.lazy配合React.Suspense。
React.lazy使用import来懒加载组件，import在webpack中最终babel会解析成调用require.Ensure的方法，动态插入script来请求js文件。

const Foo = React.lazy(() => import('../componets/Foo));
React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等。

<React.Suspense fallback={
     <div>loading...</div>}>
    <Foo/>
</React.Suspense>

2、react-loadable插件
使用方式：https://www.npmjs.com/package/react-loadable

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
     
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
     
  render() {
     
    return <LoadableComponent/>;
  }
}

3、关于图片的懒加载。
浏览器新引入了一个可以查看元素是否在视图窗口内的API：IntersectionObserver。
事件回调的参数是IntersectionObserverEntry 的集合，代表关于是否在可见视口的一系列值
其中，entry.isIntersecting 代表目标元素可见

const observer = new IntersectionObserver((changes) => {
     
  // changes: 目标元素集合
  changes.forEach((change) => {
     
    // intersectionRatio
    if (change.isIntersecting) {
     
      const img = change.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})

observer.observe(img)