vuecli3项目中webpack4配置（四）懒加载及Prefetch/Preload

wangwanjun
4,927 阅读3分钟

懒加载或“按需”加载是优化站点或应用程序的一个好方法。这种实践基本上涉及到在逻辑断点处拆分代码，然后在用户完成需要新代码块的操作后加载它。这会加速应用程序的初始负载，并减轻其整体重量，因为某些块甚至可能永远不会加载。懒加载并不是webpack才有的，只不过是webpack支持这种懒加载的编码方式。

拿官网例子来说：

增加print.js文件

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- print.js
|- /node_modules

print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

index.js

import _ from 'lodash';
function component() {
	const element = document.createElement('div');
	const button = document.createElement('button');
	const br = document.createElement('br');
	button.innerHTML = 'Click me and look at the console!';
	element.innerHTML = _.join(['Hello', 'webpack'], ' ');
	element.appendChild(br);
	element.appendChild(button);
	button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
            const print = module.default;
            print();
        });
        return element;
}
document.body.appendChild(component());

打包结果：

        Asset       Size      Chunks          Chunk Names
      bundle.js    559 KiB   index  [emitted]  index
     index.html  182 bytes          [emitted]
print.bundle.js  643 bytes   print  [emitted]  print

运行index.html查看Network，只加载了bundle.js文件，点击按钮时才会加载print.bundle.js文件。通过import的语法实现了懒加载。

如果print.bundle.js文件比较大，那么当我们点击按钮时，会有一定的延迟，这样虽然首屏加载时间变短了但是影响了用户体验，此时我们可以用Prefetch来解决这种问题。

Prefetch是告诉浏览器这是一个在未来可能使用到的资源。

浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求。如果有多个‘预请求提示’则会在浏览器空闲时排队执行。当浏览器离开空闲状态时正好在‘预请求’资源，那么浏览器会取消任何正在进行中的请求（同时会将部分响应数据放置在缓存中，而在Header中继续使用Content-Range字段 ）并停止处理‘预请求’队列。 总之:在闲置时获取资源。

使用Prefetch很简单，仅在import时增加一条魔法注释即可：

修改index.js代码

button.onclick = e => import(/* webpackChunkName: "print", webpackPrefetch: true */ './print').then(module => {
      const print = module.default;
      print();
});

再次打包，打包结果不变，此时重新运行index.html查看Network,发现浏览器除了bundle.js文件外还载最后加载了print.bundle.js文件，这个文件是浏览器在空闲状态下加载的。

点击按钮，浏览器又重新加载了一次print.bundle.js，这次加载是从浏览器缓存中获取的，所以时间较短。

通过这种懒加载+Prefetch的方式就实现了页面首次加载只需要加载自己所需要的资源，其他资源在需要时再去获取的功能，优化了页面加载速度。在我们之后的编码中可以尝试使用。

Preload为当前导航过程中可能需要资源。

preload指令与prefetch有很多不同之处：

preload的块开始与父块并行加载。prefetch在父块完成加载后开始。

preload的块具有中等优先级，可以立即下载。浏览器空闲时下载prefetch块。

父块应立即请求preload的块。prefetch可以在将来的任何时候使用。

浏览器支持不同。

avatar
文章
阅读
粉丝