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)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Webpack懒加载是一种优化前端性能的技术,可以减少初始加载文件的大小,从而提高页面加载速度。通常,当页面加载时,所有的JS代码都会被一次性加载并执行。但是,如果我们将某些模块延迟加载,只有在需要时才加载,那么就可以减少初始加载的文件大小。 Webpack提供了一个import()方法,用于动态地加载模块,它会返回一个Promise对象,可以在resolve时获取到模块的导出对象。使用这个方法,我们可以将模块的加载延迟到需要使用的时候再加载,这就是Webpack懒加载原理。 以下是一个使用Webpack懒加载的示例: ``` import('./module').then(module => { // 使用模块 }); ``` 在上面的示例中,当代码执行到import()时,会异步地加载'module'模块,加载完成后,会执行then()中的回调函数,我们可以在回调函数中使用模块。 注意:使用Webpack懒加载时,需要确保代码可以被正确地拆分成多个文件,否则可能会导致页面加载错误。 ### 回答2: webpack懒加载是一种通过代码分割实现按需加载模块的技术。当使用webpack构建项目时,所有的模块将被打包到一个文件中,然后在浏览器中加载。这意味着无论使用者需要哪些模块,都会一次性加载,这可能会导致初始加载时间过长。 懒加载通过将应用程序拆分为不同的模块,使得每个页面仅加载当前页面所需的模块,而不是加载整个应用程序。当用户访问某个页面时,只有该页面所需要的模块会被加载,其他模块则会等到需要时再进行加载。这样就能减少初始加载时间,提高页面的响应速度。 实现懒加载的方式有多种。一种常见的方式是使用import()函数动态导入模块。import()函数会返回一个Promise对象,当该模块被加载后,Promise会被resolve。可以通过调用then()方法来执行加载完成后的回调函数。 另一种方式是使用React中的Suspense组件来包裹异步加载的组件。Suspense组件可以渲染一个在组件加载完成之前显示的loading界面,等到异步组件加载完成后再进行渲染。 懒加载不仅可以减少初始加载时间,还可以按需加载不同的模块,提高应用的性能和效率。然而,懒加载也有一些注意事项。需要确保按需加载的模块之间的依赖关系正确,并且避免产生额外的网络请求。要注意合理使用懒加载,避免过度拆分导致加载过多的小模块,从而影响性能。 总结来说,webpack懒加载是一种通过代码分割实现按需加载模块的技术,可以提高应用的加载速度和性能。通过合理使用懒加载的方式,可以有效减少初始加载时间,提高用户体验。 ### 回答3: Webpack懒加载是指将某个模块作为一个单独的文件进行加载,而不是和其他模块一起打包到同一个初始模块中。这样可以在需要时才加载该模块,而不是在初始加载时就加载所有模块。 懒加载的主要优势在于减少初始加载时的文件大小和加载时间。当网页打开时,只需要加载初始模块,而其他模块则在实际需要时再进行加载。这样可以提升网页的加载速度和用户体验,特别是对于大型应用程序。 在Webpack实现懒加载可以通过使用import函数的动态导入语法来实现。例如,在需要懒加载的地方使用类似于import('module')的语法来导入模块。Webpack会将该模块打包为一个单独的文件,并在需要时进行异步加载。 需要注意的是,懒加载需要配合Webpack的代码分离功能来使用。通过配置Webpack的optimization.splitChunks参数,可以将重复引用的模块提取出来,生成共享的模块文件。这样可以避免在懒加载时重复加载已经存在的模块。 除了使用动态导入语法外,Webpack还提供了其他的技术来实现懒加载,如按需加载的require.ensure语法和React.lazy()方法。这些方法都可以实现类似的懒加载效果。 总之,Webpack懒加载是一种优化网页加载性能的重要技术。它通过将复杂的应用程序划分为多个模块文件,在需要时再进行加载,从而减少初始加载时间和文件大小,提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值