webpack-lazy loading和prefetch

1、lazy loading

我们通过一个示例来说明什么是懒加载。

// a,js
import './common'
console.log('A')
export default 'A'

// b.js
import './common'
console.log('B')
export default 'B'

// common.js
console.log('公共模块')
export default 'common'

// 异步代码
import(/* webpackChunkName: 'a'*/ './a').then(function(a) {
  console.log(a)
})

import(/* webpackChunkName: 'b'*/ './b').then(function(b) {
  console.log(b)
})

document.addEventListener('click', () => {
  // 异步加载lodash模块
  import('lodash').then(({default: _}) => {
    console.log(_.join(['3', '4']))
  })
})

目录结构:

配置webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  entry: {
    main: './lazyloading/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'build'), // 打包文件的输出目录
    filename: '[name].bundle.js', // 代码打包后的文件名
    publicPath: __dirname + '/build/', // 引用的路径或者 CDN 地址
    chunkFilename: '[name].js' // 代码拆分后的文件名
  },
  // 拆分代码配置项
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        lodash: {
          name: 'lodash',
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        },
        common: {
          name: 'common',
          minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb,如果没设置为0,common模块就不会抽离为公共模块,因为原始大小小于30kb
          minChunks: 2, // 最小公用次数
          priority: 5, // 优先级
          reuseExistingChunk: true // 公共模块必开启
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(), // 会删除上次构建的文件,然后重新构建
    new BundleAnalyzerPlugin()
  ]
}

我们打包执行index.html,当点击页面的时候,异步加载lodash并输出内容,演示如下:

第一次进入页面时并没有加载lodash模块,当我点击页面时,浏览器再去加载lodash,并执行输出,这就是所谓的懒加载。

其实懒加载就是通过import去异步加载一个模块,至于什么时候去加载,这个要根据业务逻辑来写,比如弹窗组件、模态框组件等等,都是点击按钮之后才出现。

懒加载能够加快页面的加载速度,如果你把详情页、弹窗等页面全部打包放在一个js中,当用户只是访问首页,只需要首页的代码,不需要其他页面的代码,加入多余的代码只会使得加载时间变长。

import 后面返回的是一个 then,说明这是一个 promise 类型,一些低端的浏览器不支持 promise,比如 IE ,如果要使用这种异步的代码,就要使用 babel 以及 babel-polyfill 来做转换,因为我使用的是高版本的 chrome 浏览器,对 ES6 语法是支持的,所以我并没有安装 babel 也能使用。

现在我们再列举一个示例证实懒加载在性能方面的优化

更改index.js

// 异步代码
import(/* webpackChunkName: 'a'*/ './a').then(function(a) {
  console.log(a)
})

import(/* webpackChunkName: 'b'*/ './b').then(function(b) {
  console.log(b)
})

document.addEventListener('click', () => {
  var element = document.createElement('div')
  element.innerHTML = "hello world"
  document.body.appendChild(element)
})

重新打包,并打开 index.html ,打开浏览器控制台,按 ctrl + shift + p ,输入 coverage
就能看到当前页面加载的 js 代码未使用率,红色区域表示未被使用的代码段


这里一开始红色区域的代码未被使用,当我点击了页面后,变成绿色,页面出现了 Hello World,说明代码被使用了

页面刚加载的时候,异步的代码根本就不会执行,但是我们却把它下载下来,实际上就会浪费页面执行性能,webpack 就希望像这样交互的功能,应该把它放到一个异步加载的模块去写

新建一个 click.js 文件

function handleClick() {
  var element = document.createElement('div')
  element.innerHTML = 'hello world'
  document.body.appendChild(element)
}

export default handleClick

并且将 index.js 文件改为异步的加载模块:

document.addEventListener('click', () => {
  import('./click.js').then(({default: fn}) => {
    fn()
  })
})

重新打包,使用 coverage 分析

当加载页面的时候,没有加载业务逻辑,当点击网页的时候,才会加载 0.js 模块,也就是我们在 index.js 中异步引入的 click.js

click.js文件越大时,懒加载对性能的提升越加明显

所以想写出高性能的代码,不仅仅考虑缓存,更要考虑到代码的使用率

所以 webpack 在打包过程中,是希望我们多写这种异步的代码,才能提升网站的性能,这也是为什么 webpacksplitChunks 中的 chunks 默认是 async

2、prefetch

异步能提高你网页打开的性能,而同步代码是增加一个缓存,对性能的提升是非常有限的,因为缓存一般是第二次打开网页或者刷新页面的时候,缓存很有用,但是网页的性能一般是用户第一次打开网页,看首屏的时候。

当然,这也会出现另一个问题,就是当用户点击的时候,才去加载业务模块,如果业务模块比较大的时候,用户点击后并没有立马看到效果,而是要等待几秒,这样体验上也不好,怎么去解决这种问题

一:如果访问首页的时候,不需要加载详情页的逻辑,等用户首页加载完了以后,页面展示出来了,页面的带宽被释放出来了,网络空闲了,再「偷偷」的去加载详情页的内容,而不是等用户去点击的时候再去加载

这个解决方案就是依赖 webpack 的 Prefetching/Preloading 特性

修改index.js

document.addEventListener('click', () => {
  import(/* webpackPrefetch: true */ './click.js').then(({default: fn}) => {
    fn()
  })
})

webpackPrefetch: true 会等你主要的 JS 都加载完了之后,网络带宽空闲的时候,它就会预先帮你加载好

重新打包后刷新页面,注意看 Network

可以看到还没有点击页面时,当主要的js都加载完后,0.js(也就是click.js)在网络空闲时就加载了。点击页面时,第二次加载就利用缓存中的0.js,发现加载时间由29ms缩减到4ms,可想而知预加载对页面性能提升的重要性。

这里我们使用的是 webpackPrefetch,还有一种是 webpackPreload

区别:

与 prefetch 相比,Preload 指令有很多不同之处

Prefetch会等待核心代码加载完之后,有空闲之后再去加载。Preload 会和核心的代码并行加载,还是不推荐

总结

针对优化,不仅仅是局限于缓存,缓存能带来的代码性能提升是非常有限的,而是如何让代码的使用率最高,有一些交互后才用的代码,可以写到异步组件里面去,通过懒加载的形式,去把代码逻辑加载进来,这样会使得页面访问速度变的更快,如果你觉得懒加载会影响用户体验,可以使用 Prefetch 这种方式来预加载,不过在某些游览器不兼容,会有兼容性的问题,重点不是在 Prefetch 怎么去用,而是在做前端代码性能优化的时候,缓存不是最重要的点,最重要的是代码使用的覆盖率上(coverage)

你可能感兴趣的:(webpack4,懒加载)