flutter_web_optimizer

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个针对Flutter Web的性能优化包，解决了页面加载缓慢和浏览器缓存问题。它通过优化资源交付、管理缓存策略以及改善初始加载时间来提升Web应用速度。专为面向Web平台的Flutter开发者设计，可通过简单的pub add命令无缝集成到现有项目中。该工具有助于确保在各种设备和网络环境下实现更快的用户体验和更优的资源利用。

适合场景

改进首次内容绘制时间
减小捆绑包大小以加快加载速度
管理浏览器缓存以更新资产
优化静态资源交付
提升低带宽连接下的网页应用性能

主要特点

自动资产优化
更新资源的缓存清除
与 Flutter Web 的轻量级集成
支持增量构建
实时性能反馈

适合对象

寻求性能提升的Flutter Web开发者
需要快速加载时间的项目
频繁更新部署到生产环境的应用
专注于用户体验和留存的团队
开发者排查网页性能缓慢问题

使用建议

需要 Flutter 3.0 或更高版本
复杂的构建设置可能需要配置
不适用于非Web Flutter 目标
性能提升取决于项目结构
除了基本设置外，文档有限

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

中文文档

Intro

A optimization tools for flutter web，solved web page loading slow and browser cache problem.

Importantance

how to configure index.html, please refer to the following

Features

demo

split large file and cdn resource file，optimize web page loading slow.
hashed resource file，solve browser cache problem.

Getting started

dev_dependencies:
  flutter_web_optimizer: ^1.5.1

Usage

navigate to the root directory of the project，execute plugin and optimize command

plugin command

the plugin command support auto generate plugin template files，then upload resources files to file servers，such as such as Tencent COS and Alibaba OSS

flutter pub run flutter_web_optimizer plugin --path scripts/test_plugin.dart

path parameter required，refers to plugin file path.

optimize command

optimize command support split large file、hashing resource file and cdn resource file.

flutter pub run flutter_web_optimizer optimize --asset-base http://192.168.101.93:9091/app/ --plugin scripts/test_plugin.dart

flutter pub run flutter_web_optimizer optimize --asset-base http://192.168.101.93:9091/app/ --plugin flutter_web_cos_upload_plugin

asset-base parameter required，refers to file server internet address，it's must end with '/'
web-output parameter not required，refers to flutter web build generated artifact path, default as build/web.
plugin parameter not required，if needs upload resource file to file server，it's must be required. it support file mode and plugin mode
- file mode: it's refers to plugin file path. cos_upload_plugin.dart provide a example upload resource file to tencent cos.
- plugin mode: it's refers to plugin name. check flutter_web_cos_upload_plugin for how to use it
--enable-pwaparameter not required，refers to PWA service worker，default to true
--hash-filter-regexpparameter not required，support filtering file when hash file
--enable-vconsole parameter not required，refers to enable tencent vconsole tools, default to false

搜索插件、代码仓与 APP 分类

安装插件