前端性能优化之预加载

前言

性能优化是老生常谈的问题了，很多同学都直呼，什么性能优化，我都是脚手架一把梭。其实在脚手架中已经使用了很多手段进行了性能优化，例如：代码压缩、代码分割、树摇、样式抽离等。可能你的脚手架已经帮你实现了，只是你没有发现。下面来介绍一下什么是预加载。

预加载介绍

链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

目前支持两种方式的预加载

preload

<link href=/js/chunk-vendors.5e63c7cf.js rel=preload as=script>

当浏览器解析到preload会立即进行资源的请求，需要注意的是使用preload进行预加载时需要指定文件的类型

prefetch

<link href=/js/chunk-dca4e6ea.e4986a0a.js rel=prefetch>

当浏览器解析到prefetch时，不会立即请求资源，会等待浏览器空闲以后再进行资源的请求

综上所述

preload适用于加载当前页面需要用到的资源，prefetch适用于后续页面需要用到的资源

使用方式

现在前端都是基于webpack来实现构建，目前webpack v4.6.0+ 实现了对预获取和预加载的支持

使用方式如下

import(/* webpackPrefetch: true */ "LoginModal");
import(/* webpackPreload: true */ "ChartingLibrary");

当然我们也可以借助preload-webpack-plugin插件来实现

www.npmjs.com/package/pre…

• preload初始模块
• prefetch异步模块

new PreloadWebpackPlugin(
    {
        rel: "preload",
        include: "initial",
        fileBlacklist: [
            /\.map$/,
            /hot-update\.js$/
        ]
    }
),
new PreloadWebpackPlugin({
    rel: 'prefetch',
    include: 'asyncChunks'
}),

总结

以后不要再说自己没做过性能优化了 😀