社区精选 | 前端性能优化(图文并茂，通俗易懂)

今天小编为大家带来的是社区作者 寒水寺一禅 的文章。看看他如何讲解前端性能优化。

一、静态和动态导入

import("b.vue").then()  //动态导入，在打包时会自动chunk

二、可见性导入

三、交互时导入（懒惰式加载）

• 当用户首次单击以与该组件进行交互时
• 将组件滚动到视图中
• 或延迟该组件的加载，直到浏览器空闲（通过 requestIdleCallback API）。

• 立即加载资源（加载脚本的正常方式）
• Lazy （路由）- 当用户导航到路由或组件时加载
• Lazy （交互时） - 当用户单击 UI 时加载（例如显示聊天）
• Lazy （在视口中）- 当用户滚动到组件时加载
• Prefetch - 预拉取
• Preload - 预加载

四、基于路由的拆分

{
    path: "/home",
    component: () => import(/* webpackChunkName: "home"*/  "@/components/layout/Index.vue"),
    children: [
      //todo     
    ],
},

五、捆绑拆分

六、断续器模式

• 有效地推送关键资源，从而最大限度地减少到服务器的往返量并减少加载时间。
• 尽快渲染初始路由，提升用户体验
• 在后台为经常访问的路由预缓存资源，以最大限度地减少对服务器的请求量并实现更好的脱机体验
• 懒惰地加载不经常请求的路线或资源

七、Tree Shaking

八、Preload

const EmojiPicker = import(/* webpackPreload: true */ "./EmojiPicker");

<link rel="prefetch">方式

const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker");

十、虚拟列表

十一、压缩脚本

• Gzip 和 Brotli 是两种最常用的被现在浏览器所支持的 压缩js 方式(需要和nginx配置使用)
• Brotli 在相似的压缩级别下提供了更好的压缩比(但是需要https，而gzip在http下也可以)
• 如果你使用 webpack来打包你得代码，你可以使用 CompressionPlugin 压缩为gzip 或者 使用 BrotliWebpackPlugin 压缩为brotli，如果使用rollup，则使用rollup-plugin-gzip插件
• Gzip压缩切换到Brotli压缩，文件体积大小会降低15%-25%左右。
• compress(a + b) <= compress(a) + compress(b) - 单个大捆绑包将比多个较小的捆绑包提供更好的压缩

静态与动态压缩

Gzip 和Brotli算法

比较gzip和brotli

启用压缩

module.exports = {
 //...
 plugins: [
   //...
   new CompressionPlugin()
 ]
}

server {
        listen 8080;
        server_name localhost;

        # 需要http_gzip_static_module 模块
        gzip_static on;  
        
        location / {
            alias html
            index index.html index.htm;
            try_files $uri $uri/ /html/index.html;
        }
}

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/