【黄金圆环】在研发领域的实践分享

01

 引言

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将

在前端开发中，构建工具的选择和使用至关重要。Webpack 一直是前端构建工具的主流选择，但随着前端技术的发展，Vite 作为一种新兴的构建工具，以其快速的开发体验和现代化特性，逐渐受到开发者的青睐。

本文将结合黄金圆环法则，详细探讨如何将一个 Webpack 项目迁移到 Vite。

通过项目的迁移实践，我们实现了系统项目：构建时长极大缩短，由原来的120s构建时长， 提升为1.5s构建，效率上提升了 98%。

02

什么是黄金圆环

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将

为什么迁移

npm i vite-plugin-vue2@1.9.0 vite@2.9.18 -D

npm i vite-plugin-dynamic-import@1.5.0vite-plugin-env-compatible@1.1.1 vite-plugin-node-polyfills@0.7.0  vite-plugin-commonjs@0.10.0 vite-plugin-require-context@0.10.0 path-browserify@1.0.1

import { defineConfig } from 'vite'import { createVuePlugin } from 'vite-plugin-vue2'import envCompatible from 'vite-plugin-env-compatible'import { viteCommonjs } from 'vite-plugin-commonjs'import viteRequireContext from 'vite-plugin-require-context'import dynamicImport from 'vite-plugin-dynamic-import'import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineConfig({  // 项目公共的配置  plugins: [    createVuePlugin({      jsx: true, // 支持vue jsx语法(需要同时把.js改为.jsx或者script标签加属性lang="jsx")    }),    dynamicImport(),    viteCommonjs(),    viteRequireContext(),    envCompatible(),    nodePolyfills(),  ],  envPrefix: ['VUE_APP_'], // 兼容VUE_APP_前缀
  // 项目个性化的配置  base: '/',   server: {    host: 'me.jr.jd.com',  },  resolve: {    extensions: [      '.js',      '.vue',      '.json',    ],    alias: {}  },})

$menuText: red;:export {    menuText: $menuText;}

function vitePluginTransDeep() {  return {    name: 'vite-plugin-transform-scss',    enforce: 'pre',    transform(src, id) {      if (        /\.(js|vue)(\?)*/.test(id) &&        id.includes('lang.scss') &&        !id.includes('node_modules')      ) {        return {          code: src.replace(/(\/deep\/|>>>)/gi, '::v-deep')        }      }    }  }}

 css: {  preprocessorOptions: {   scss: {    additionalData: `@import "src/styles/variables.scss";`, // 如果有全局变量文件   },  }, }

import { defineConfig } from 'vite'import { createVuePlugin } from 'vite-plugin-vue2'import envCompatible from 'vite-plugin-env-compatible'import { viteCommonjs } from 'vite-plugin-commonjs'import viteRequireContext from 'vite-plugin-require-context'import dynamicImport from 'vite-plugin-dynamic-import'import { nodePolyfills } from 'vite-plugin-node-polyfills'
function vitePluginTransDeep() {  return {    name: 'vite-plugin-transform-scss',    enforce: 'pre',    transform(src, id) {      if (        /\.(js|vue)(\?)*/.test(id) &&        id.includes('lang.scss') &&        !id.includes('node_modules')      ) {        return {          code: src.replace(/(\/deep\/|>>>)/gi, '::v-deep'),        }      }    }  }}

export default defineConfig({  // 公共配置  plugins: [    createVuePlugin({      jsx: true,     }),    vitePluginTransDeep(),    dynamicImport(),    viteCommonjs(),    viteRequireContext(),    envCompatible(),    nodePolyfills(),  ],  envPrefix: ['VUE_APP_'], // 兼容VUE_APP_前缀  // 个性化配置  base: '/dd/',  server: {    host: 'me.jr.jd.com',  },  resolve: {    extensions: [      '.js',      '.vue',      '.json',    ],    alias: {} //  },  css: {    preprocessorOptions: {      scss: {         additionalData: `@import './src/variables/index.scss';`,      }    }  }})

▪功能支撑：会员成长体系、等级计算策略、权益体系、营销底层能力支持

▪用户活跃：会员关怀、用户触达、活跃活动、业务线交叉获客、拉新促活