F2C基于EMP3.0升级后构建性能提升10倍

KenXu
452 阅读3分钟

背景

F2C 为我们团队自研的一套 设计研发一体化的解决方案 具体介绍可以参考篇尾介绍，大概呈现如下

  • 开始项目使用 webpack进行构建，构建速度、debug等严重影响迭代速度
  • 构建过程中需要修正产物内容以及figma的适配，各种插件尝试浪费很多适配时间

改造

具体明细

  • 多入口适配，Figma 需要暴露两个入口分别是 code.js 与 ui.js
  • 项目载入 Figma 插件需要经过 base64 encode 执行,所以必须把所有产物做 inline 操作
  • 开发过程中必须用 build:watch 来代替传统的 dev模式
  • 必须把 manifest.json 暴露到产物

综上所述，我们设置配置如下

改造前一共安装了 30+ 的插件适配

安装插件

  • @empjs/cli
  • @empjs/plugin-postcss
  • @empjs/plugin-react
  • react-dev-utils/InlineChunkHtmlPlugin
  • html-inline-css-webpack-plugin
  • create-file-webpack

emp-config.js

import { defineConfig, rspack, HtmlWebpackPlugin } from "@empjs/cli";
import pluginPostcss from "@empjs/plugin-postcss";
import pluginReact from "@empjs/plugin-react";
import CreateFileWebpack from 'create-file-webpack'
// node 20后需要把基础变量做声明
import path, { resolve } from 'node:path'
import Module from 'node:module'
import { fileURLToPath } from 'node:url'
import { dirname } from 'node:path'
export const require = Module.createRequire(import.meta.url)
export const __filename = fileURLToPath(import.meta.url)
export const __dirname = dirname(__filename)
//
const { figmaPlugin } = require('./package.json')

export default defineConfig((store) => {
  return {
    // 加入 react、postcss
    plugins: [pluginReact(), pluginPostcss()],
    // 声明 ui.tsx 与 code.ts 入口，并对 ui.tsx进行自定义
    entries: {
      'ui.tsx': {
        template: 'src/ui.html',
        chunks: ['ui'],
      },
      'code.ts': {}
    },
    // 产物重命名
    output: {
      publicPath: '',
      globalObject: 'self',
      filename: `[name].js`,
      cssFilename: `[name].css`,
      cssChunkFilename: `[name].css`,
    },
    chain(config) {
     // 
      config.plugin('ProvidePlugin').use(rspack.ProvidePlugin, [{
        process: [require.resolve('process/browser')],
        Buffer: ['buffer', 'Buffer'],
      }])
      // 创建 manifest.json 到 dist
      config.plugin('CreateFileWebpack').use(CreateFileWebpack, [{
        path: path.resolve(__dirname, 'dist'),
        fileName: 'manifest.json',
        content: JSON.stringify(figmaPlugin),
      }])
      // 所有产物进行 inline 操作
      // js inline
      const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
      config.plugin('inline').use(InlineChunkHtmlPlugin, [HtmlWebpackPlugin, [/ui/]])
      // css inline
      const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
      config.plugin('inlineCss').use(HTMLInlineCSSWebpackPlugin, [{}])
      //img inline
      config.module.rule('image').type('asset/inline')
      config.module.rule('svg').type('asset/inline')

    }
  };
});

package.json

{
...
  "scripts": {
    "build": "emp build",// 正式环境执行这段
    "build:watch": "emp build -w -sv"// dev模式下执行这段
  },
"figmaPlugin": {
 
    }
  }
...
}

经过以上改造、可以完美适配项目构建，性能得到显著提升

性能对比

目前emp3无论是启动还是打包，性能均大幅度超过webpack，其中，冷启动速度提升接近10倍

行为\版本emp3webpack
冷启动4.31s42.03s
热启动3.85s22.16s
热更新891ms6.66s
打包6.16s53.12s

首次安装依赖后启动dev

image.png

image.png

image.png

有缓存情况下重新启动dev

image.png

image.png

构建打包

image.png

image.png

包体积对比

emp3webpack
包体积5.14MB5.35MB

image.png

image.png

总结

  • 经过 EMP 3.0 改造后，项目从构建、调试、产物都得到质的提升

F2C介绍

低门槛高提效

  • 非入侵式接入到任意web前端、React Native等开发工作流
  • 灵活的架构组合，可以实现除 Figma外的更多数据接入的可能性如 PSD,Sketch 等

UI 智能转换 生产级代码

  • 支持 React 以及 (React-Native Vue，规划中) 等主流开发框架代码输出
  • 智能识别 Var、List、Slot、Bg、Tabs等标签生成相应代码，后续根据约定可以实现更多可能性

交付逻辑提效

  • 产品推进过程避免不了重复来回的修改，从F2C的角度是，设计上的布局、交互上的修改，可以基本一键完成，免除了来回沟通修复的过程
  • 设计的验收问题，从目前生成的效果来看，可以很大程度上1比1完成相关静态交互稿

简化开发难度

针对移动端、跨端(React Native、鸿蒙、Taro) 、等对CSS布局不熟悉等开发者提供强大的帮助

  • 布局自动化，css布局一键生产，高度还原，高速提效
  • 代码语义化，消除开发对代码的阅读难度
  • 划分合理化，生成代码与业务代码很好分离，每个需要定制的组件都会导出相应的可编辑项
avatar
文章
阅读
粉丝