https://vleedesigntheory.website/tech/front/

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>前端 | 维李设论</title>
7    <meta name="description" content="专注大前端领域发展">
8    <meta name="generator" content="VuePress 1.3.0">
9    <meta name="theme-color" content="#3eaf7c">
10  <meta name="apple-mobile-web-app-capable" content="yes">
11  <meta name="apple-mobile-web-app-status-bar-style" content="black">
12  <link rel="icon" href="/favicon.ico">
13    
14    <link rel="preload" href="/assets/css/0.styles.ba29e539.css" as="style"><link rel="preload" href="/assets/js/app.fb3bb1a1.js" as="script"><link rel="preload" href="/assets/js/2.984c461b.js" as="script"><link rel="preload" href="/assets/js/57.b323621e.js" as="script"><link rel="prefetch" href="/assets/js/10.55770b55.js"><link rel="prefetch" href="/assets/js/11.15cdb43e.js"><link rel="prefetch" href="/assets/js/12.17b798e3.js"><link rel="prefetch" href="/assets/js/13.790b3d86.js"><link rel="prefetch" href="/assets/js/14.d79a8704.js"><link rel="prefetch" href="/assets/js/15.bc4dd97f.js"><link rel="prefetch" href="/assets/js/16.0b900b74.js">

14<link rel="prefetch" href="/assets/js/17.36876f42.js"><link rel="prefetch" href="/assets/js/18.179e71a3.js"><link rel="prefetch" href="/assets/js/19.57b341aa.js"><link rel="prefetch" href="/assets/js/20.aa38dfac.js"><link rel="prefetch" href="/assets/js/21.ac2131c4.js"><link rel="prefetch" href="/assets/js/22.03ef9be6.js"><link rel="prefetch" href="/assets/js/23.008c2f78.js"><link rel="prefetch" href="/assets/js/24.46d5ce43.js"><link rel="prefetch" href="/assets/js/25.9b768a2c.js"><link rel="prefetch" href="/assets/js/26.ffd8da2f.js"><link rel="prefetch" href="/assets/js/27.9b21fc5c.js"><link rel="prefetch" href="/assets/js/28.fc5a323a.js"><link rel="prefetch" href="/assets/js/29.b826eaaa.js"><link rel="prefetch" href="/assets/js/3.7a164780.js"><link rel="prefetch" href="/assets/js/30.ff1c784a.js"><link rel="prefetch" href="/assets/js/31.4d155fb1.js"><link rel="prefetch" href="/assets/js/32.daa14379.js"><link rel="prefetch" href="/assets/js/33.582e2a1a.js"><link rel="prefetch" href="/assets/js/34.4c420efc.js"><link rel="prefetch" href="/assets/js/35.fb046370.js"><link rel="prefetch" href="/assets/js/36.0b16a04f.js"><link rel="prefetch" href="/assets/js/37.0a47c1e7.js"><link rel="prefetch" href="/assets/js/38.0dd11f51.js"><link rel="prefetch" href="/assets/js/39.77fd971c.js"><link rel="prefetch" href="/assets/js/4.32c38324.js"><link rel="prefetch" href="/assets/js/40.4137ffc7.js"><link rel="prefetch" href="/assets/js/41.cf5badab.js"><link rel="prefetch" href="/assets/js/42.4f871740.js"><link rel="prefetch" href="/assets/js/43.ad1e0969.js"><link rel="prefetch" href="/assets/js/44.22f5add5.js"><link rel="prefetch" href="/assets/js/45.5212b4fe.js"><link rel="prefetch" href="/assets/js/46.587aa7d3.js"><link rel="prefetch" href="/assets/js/47.16dae8e1.js"><link rel="prefetch" href="/assets/js/48.84bbbf38.js"><link rel="prefetch" href="/assets/js/49.0e7801a0.js"><link rel="prefetch" href="/assets/js/5.72de0201.js"><link rel="prefetch" href="/assets/js/50.e0f6af4a.js"><link rel="prefetch" href="/assets/js/51.2096465a.js"><link rel="prefetch" href="/assets/js/52.93f03720.js"><link rel="prefetch" href="/assets/js/53.777564a9.js"><link rel="prefetch" href="/assets/js/54.9795ecef.js"><link rel="prefetch" href="/assets/js/55.3b136031.js"><link rel="prefetch" href="/assets/js/56.e1545abc.js"><link rel="prefetch" href="/assets/js/58.5842a749.js"><link rel="prefetch" href="/assets/js/59.ad04cd4b.js"><link rel="prefetch" href="/assets/js/6.886d04e6.js"><link rel="prefetch" href="/assets/js/60.2e512f00.js"><link rel="prefetch" href="/assets/js/61.8810bbd2.js"><link rel="prefetch" href="/assets/js/62.343a04b0.js"><link rel="prefetch" href="/assets/js/63.6b8a6d4f.js"><link rel="prefetch" href="/assets/js/64.9a7a7198.js"><link rel="prefetch" href="/assets/js/65.fa1b977a.js"><link rel="prefetch" href="/assets/js/66.9e856404.js"><link rel="prefetch" href="/assets/js/67.d3f22cbd.js"><link rel="prefetch" href="/assets/js/68.f99e4db6.js"><link rel="prefetch" href="/assets/js/69.be9dcf48.js">

14<link rel="prefetch" href="/assets/js/7.fb7fa9c5.js"><link rel="prefetch" href="/assets/js/70.9a8ee5dc.js"><link rel="prefetch" href="/assets/js/71.83dc37dd.js"><link rel="prefetch" href="/assets/js/72.10604989.js"><link rel="prefetch" href="/assets/js/73.89af4f61.js"><link rel="prefetch" href="/assets/js/74.29dc2220.js"><link rel="prefetch" href="/assets/js/75.92f1d1ed.js"><link rel="prefetch" href="/assets/js/76.8c93d5da.js"><link rel="prefetch" href="/assets/js/77.d54555b8.js"><link rel="prefetch" href="/assets/js/78.ff0fd535.js"><link rel="prefetch" href="/assets/js/79.93b124bb.js"><link rel="prefetch" href="/assets/js/8.e463464b.js"><link rel="prefetch" href="/assets/js/80.92c3da16.js"><link rel="prefetch" href="/assets/js/81.29d01271.js"><link rel="prefetch" href="/assets/js/82.a6bff9a3.js"><link rel="prefetch" href="/assets/js/83.a935f695.js"><link rel="prefetch" href="/assets/js/84.57b80447.js"><link rel="prefetch" href="/assets/js/85.1971d670.js"><link rel="prefetch" href="/assets/js/86.7ddf0472.js"><link rel="prefetch" href="/assets/js/87.68da3dca.js"><link rel="prefetch" href="/assets/js/88.0842be22.js"><link rel="prefetch" href="/assets/js/89.2bfa81dd.js"><link rel="prefetch" href="/assets/js/9.f252a2b6.js"><link rel="prefetch" href="/assets/js/90.1211f51e.js"><link rel="prefetch" href="/assets/js/91.64b2e388.js"><link rel="prefetch" href="/assets/js/92.6f513934.js"><link rel="prefetch" href="/assets/js/93.de9d8bfa.js"><link rel="prefetch" href="/assets/js/94.8443d10b.js"><link rel="prefetch" href="/assets/js/95.da5655f8.js"><link rel="prefetch" href="/assets/js/96.264f434c.js"><link rel="prefetch" href="/assets/js/97.ceabeee9.js">
15    <link rel="stylesheet" href="/assets/css/0.styles.ba29e539.css">
16  </head>
17  <body>
18    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">维李设论</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计道" class="dropdown-title"><span class="title">设计道</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/design/ui/" class="nav-link">
19  交互
20</a></li><li class="dropdown-item"><!----> <a href="/design/vi/" class="nav-link">
21  视觉
22</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术栈" class="dropdown-title"><span class="title">技术栈</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tech/front/" class="nav-link router-link-exact-active router-link-active">
23  前端
24</a></li><li class="dropdown-item"><!----> <a href="/tech/back/" class="nav-link">
25  后端
26</a></li><li class="dropdown-item"><!----> <a href="/tech/cs/" class="nav-link">
27  基础
28</a></li></ul></div></div><div class="nav-item"><a href="/mem/" class="nav-link">
29  管理
30</a></div><div class="nav-item"><a href="/interview/" class="nav-link">
31  面试
32</a></div><div class="nav-item"><a href="/essay/" class="nav-link">
33  随笔
34</a></div><div class="nav-item"><a href="https://github.com/we452366" target="_blank" rel="noopener noreferrer" class="nav-link external">
35  github
36  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">

36<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计道" class="dropdown-title"><span class="title">设计道</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/design/ui/" class="nav-link">
37  交互
38</a></li><li class="dropdown-item"><!----> <a href="/design/vi/" class="nav-link">
39  视觉
40</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术栈" class="dropdown-title"><span class="title">技术栈</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tech/front/" class="nav-link router-link-exact-active router-link-active">
41  前端
42</a></li><li class="dropdown-item"><!----> <a href="/tech/back/" class="nav-link">
43  后端
44</a></li><li class="dropdown-item"><!----> <a href="/tech/cs/" class="nav-link">
45  基础
46</a></li></ul></div></div><div class="nav-item"><a href="/mem/" class="nav-link">
47  管理
48</a></div><div class="nav-item"><a href="/interview/" class="nav-link">
49  面试
50</a></div><div class="nav-item"><a href="/essay/" class="nav-link">
51  随笔
52</a></div><div class="nav-item"><a href="https://github.com/we452366" target="_blank" rel="noopener noreferrer" class="nav-link external">
53  github
54  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tech/front/summary.html" class="sidebar-link">从2019看2020前端发展趋势</a></li><li><a href="/tech/front/locales.html" class="sidebar-link">阿里飞冰(ice)框架下国际化实践</a></li><li><a href="/tech/front/tree20200531.html" class="sidebar-link">基础视频平台树组件踩坑实践</a></li><li><a href="/tech/front/range20200613.html" class="sidebar-link">基于el-slider自定义range组件封装实践</a></li><li><a href="/tech/front/hot20200620.html" class="sidebar-link">Vue脚手架热更新技术探秘</a></li><li><a href="/tech/front/tick20200625.html" class="sidebar-link">nextTick在项目中的实践</a></li><li><a href="/tech/front/cli20200701.html" class="sidebar-link">vee-cli脚手架实践(上)</a></li><li><a href="/tech/front/cli20200702.html" class="sidebar-link">vee-cli脚手架实践(中)</a></li><li><a href="/tech/front/cli20200703.html" class="sidebar-link">vee-cli脚手架实践(下)</a></li><li><a href="/tech/front/hooks20200826.html" class="sidebar-link">React Hooks在SD-WAN项目中实践</a></li><li><a href="/tech/front/flexiwan20201218.html" class="sidebar-link">flexiwan项目踩坑实践（前端篇）</a></li><li><a href="/tech/front/summary2020.html" class="sidebar-link">从2020看2021前端发展趋势</a></li><li><a href="/tech/front/federation20210119.html" class="sidebar-link">webpack5模块联邦源码探究</a></li><li><a href="/tech/front/topology20210122.html" class="sidebar-link">动态渲染拓扑图方案探究</a></li><li><a href="/tech/front/micro20210125.html" class="sidebar-link">几种微前端方案探究</a></li><li><a href="/tech/front/umi20210222.html" class="sidebar-link">umi3源码探究简析</a></li><li><a href="/tech/front/react20210305.html" class="sidebar-link">react17源码浅析</a></li><li><a href="/tech/front/screen20210402.html" class="sidebar-link">自服务大屏踩坑实践</a></li><li><a href="/tech/front/graph20210419.html" class="sidebar-link">可视化图布局算法浅析</a></li><li><a href="/tech/front/function20210427.html" class="sidebar-link">前端函数式编程浅析</a></li><li><a href="/tech/front/structure20210523.html" class="sidebar-link">数据结构算法在专网项目中的实践</a></li><li><a href="/tech/front/postmessage20210731.html" class="sidebar-link">postMessage踩坑实践</a></li><li><a href="/tech/front/csp20210813.html" class="sidebar-link">Web内容安全策略浅析</a></li><li><a href="/tech/front/pcx20211018.html" class="sidebar-link">PC端高倍屏适配方案实践</a></li><li><a href="/tech/front/summary2021.html" class="sidebar-link">从2021看2022前端发展趋势</a></li><li><a href="/tech/front/imagepic20220128.html" class="sidebar-link">前端图床搭建实践（前端篇）</a></li><li><a href="/tech/front/xsix20220305.html" class="sidebar-link">AntV X6源码简析</a></li><li><a href="/tech/front/testus20220420.html" class="sidebar-link">前端测试套件构建实践</a></li><li><a href="/tech/front/pnw20220608.html" class="sidebar-link">浅析专网通信领域的前端架构设计</a></li><li><a href="/tech/front/piper20220913.html" class="sidebar-link">前端设计走查平台实践（前端篇）</a></li><li><a href="/tech/front/summary2022.html" class="sidebar-link">从2022看2023前端发展趋势</a></li><li><a href="/tech/front/mpa20230217.html" class="sidebar-link">

54vue脚手架多页自动化生成实践</a></li><li><a href="/tech/front/gsix20230624.html" class="sidebar-link">AntV G6新版源码浅析</a></li><li><a href="/tech/front/pwa20230731.html" class="sidebar-link">面向边缘场景的PWA实践</a></li><li><a href="/tech/front/mock20230924.html" class="sidebar-link">基于 Webpack 插件体系的 Mock 服务</a></li><li><a href="/tech/front/summary2023.html" class="sidebar-link">从2023看2024前端发展趋势</a></li><li><a href="/tech/front/lcd20241024.html" class="sidebar-link">面向垂类场景的智能化低代码引擎</a></li><li><a href="/tech/front/summary2024.html" class="sidebar-link">从2024看2025前端发展趋势</a></li><li><a href="/tech/front/summary2025.html" class="sidebar-link">从2025看2026前端发展趋势</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="前端"><a href="#前端" class="header-anchor">#</a> 前端</h1> <p><img src="/banner1.png" alt="图片"></p> <blockquote><p>本栏目主要分享前端相关的一些文章及实践，旨在输出一些个人的简介与总结</p></blockquote> <p><img src="/domain.png" alt="图片"></p> <p>专注于 <code>工程化</code>、<code>可视化</code>、<code>Serverless</code> 相关的大前端领域发展，开源社区爱好者</p> <p>文章推荐：</p> <ul><li><a href="/tech/front/summary.html">从2019看2020前端发展趋势</a></li> <li><a href="/tech/front/summary2020.html">从2020看2021前端发展趋势</a></li> <li><a href="/tech/front/summary2021.html">从2021看2022前端发展趋势</a></li> <li><a href="/tech/front/summary2022.html">从2022看2023前端发展趋势</a></li> <li><a href="/tech/front/summary2023.html">从2023看2024前端发展趋势</a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
55    

55<script src="/assets/js/app.fb3bb1a1.js" defer></script>

55<script src="/assets/js/2.984c461b.js" defer></script>

55<script src="/assets/js/57.b323621e.js" defer></script>

55
56  </body>
57</html>