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 应用的加载速度。

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

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

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

优化MaterialIcons-Regular.otf文件

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

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

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

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

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

web运行在本地命令

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