flutter web 优化实践（Mac版）_materialicons-regular.otf-优快云博客

文章介绍了如何使用Flutter命令行工具进行web项目的打包构建，可以选择canvaskit或html渲染模式。对于性能优化，选择了html模式，并详细说明了两种模式的优缺点。此外，文章还阐述了开启Gzip压缩以减小文件传输大小和提高加载速度的步骤，以及如何优化MaterialIcons-Regular.otf文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter web 打包及开启gzip压缩

flutter web打包构建

flutter web打包构建

记录优化web打包构建后的项目性能，参考文献：Flutter Web 在《一起漫部》的性能优化探索与实践

使用命令构建web，选择渲染模式

官网提供了Flutter build web命令来构建 Web 利用，并且反对 canvaskit、html 两种渲染器模式，通过–web-renderer参数来抉择应用。

canvaskit

当应用 canvaskit 渲染器模式时，flutter 将 Skia 编译成 WebAssembly 格局，并应用 WebGL 渲染元素

长处：渲染性能更好，跨端一致性高，
毛病：利用体积变大，关上速度慢（须要加载 canvaskit.wasm 文件），兼容性绝对差

html

当应用 html 渲染器模式时，flutter 采纳 HTML 的 Custom Element、CSS、SVG、2D Canvas 和 WebGL 组合渲染元素

长处：利用体积更小，关上速度较快，兼容性更好
毛病：渲染性能绝对差，跨端一致性受到影响

在这里我选择html

flutter build web --release --web-renderer html

如果提示空安全问题则用一下命令

flutter build web --no-sound-null-safety --release --web-renderer html

以上命令运行完成后，则会在build/web中出现构建完的内容

开启Gzip压缩

生成 Gzip 压缩文件，并在 Nginx 服务器上成功启用 Gzip 压缩，从而减小传输的文件大小，提高 Web 应用的加载速度。

进入build/web目录下
运行以下命令

find . \( -name "*.js" -o -name "*.html" -o -name "*.css" -o -name "*.svg" -o -name "*.json" \) -exec gzip -k -f {} \;

运行成功后会在build/web目录下出现很多同名的.gz文件

优化MaterialIcons-Regular.otf文件

构建android apk使用–tree-shake-icons参数，

 flutter build apk --no-sound-null-safety --tree-shake-icons

构建web项目
运行以下命令将MaterialIcons-Regular.otf复制到构建好的web中

cp -r ./build/app/intermediates/flutter/release/flutter_assets/ ./build/web/assets

重新上传至服务器，优化结果如下

web运行在本地命令

 flutter run --no-sound-null-safety -d chrome --web-hostname ip --web-port 8080