一个好的前端开发模式总结
<h3 id="背景">背景</h3><p>随着社会的不断进步，人们慢慢从物质消费升华到了精神消费，前端也相比原来重要了许多，如何开发好一个项目，开发意识非常重要，这时候应该如何更好的开发一个前端网站的流程尤为重要。</p>
<h3 id="开发阶段">开发阶段</h3>
<h4 id="1根据公司实际情况选择框架技术">1.根据公司实际情况选择框架技术</h4>
<p>前端现在比较主流的三大框架自行选择。<br>
例如react+webpack+es6+dva</p>
<p><img src="https://img2018.cnblogs.com/blog/749102/201909/749102-20190919171051709-1087251924.png"></p>
<p>webpack:模块打包，处理jsx、less、image、热更新、按需加载、各个完善的打包插件,打包方式按自己需求配置（分包、压缩等等）将项目运行速度提升，优化空间很大</p>
<p>react:虚拟dom，减少DOM操作，虚拟dom算法可以比较数据变化的情况进行更新，将渲染速度达到最高，setState绑定数据，开发效率更高，更好的进行组件开发</p>
<p>es6:前端书写代码更加方便，提供了很多方便的函数操作数据，以更少的代码做更多的事（对象合并，数据读取，循环遍历等等），大部分浏览器已经兼容，babel也可以将es6代码编译成es5</p>
<p>dva:基于Redux的前端应用开发框架，可以省去很多redux的代码，能够非常简单的实现异步交互以及全局数据流</p>
<h4 id="2-提取公用组件查询组件新增编辑组件富文本编辑组件面包屑等等">2. 提取公用组件（查询组件，新增编辑组件、富文本编辑组件、面包屑等等）</h4>
<p><img src="https://img2018.cnblogs.com/blog/749102/201909/749102-20190919171330701-1196419250.png"></p>
<p>公用组件在项目中开发非常重要，要时刻具备组件化的意识，可以借鉴<br>
组件开发方案以及前端组件化开发方向</p>
<ul>
<li>针对经常会使用的组件提取成公用组件</li>
<li>组件化开发要具备开发的意识，怎么写出一个较好维护的前端组件</li>
<li>如何管理开发的组件，可以使用npm上传到npm仓库，方便统一的维护以及管理，可以借鉴react组件发布到npm</li>
</ul>
<h4 id="3-提取公用函数">3. 提取公用函数</h4>
<p>项目中可以复用很多的公用函数（正则表达式验证、获取url，数组的操作等等），可以将他们提取出来，封装成公用函数库，拿来使用，也可以上传到npm库进行管理，其余的开发者也可以更方便的使用</p>
<ul>
<li>方便维护</li>
<li>提升自己的开发效率</li>
<li>可以不断迭代更多好用的函数</li>
</ul>
<h4 id="4css模块化开发">4.css模块化开发</h4>
<p>怎么实现css模块化，css模块化</p>
<ul>
<li>可以让命名更加规范，多人开发出现的问题更少</li>
<li>提高代码重用率</li>
<li>提高开发效率</li>
<li>公用的css可以提取出来放置到cdn加载</li>
</ul>
<h3 id="后续优化">后续优化</h3>
<h4 id="静态资源可以走cdn">静态资源可以走cdn</h4>
<ul>
<li>多域名加载资源</li>
<li>文件可能已经被加载过并保存有缓存</li>
<li>有效防止网站被攻击</li>
</ul>
<h4 id="webpack打包优化">webpack打包优化</h4>
<ul>
<li>HappyPack优化</li>
<li>CommonsChunk分包，抽离公共依赖</li>
<li>DllPlugin进行打包优化</li>
<li>ExtractTextPlugin分离css</li>
<li>UglifyJsPlugin压缩代码</li>
<li>gzip压缩</li>
</ul>
<p>总结：<br>
前端开发时刻都要具备组件化开发的意识，公用的代码块以及函数块，样式表都可以放置到npm仓库中，这样后面开发效率也会越来越高，出问题的情况越来越少</p><br><br>
来源：https://www.cnblogs.com/Hsong/p/11551225.html
頁:
[1]