前端知识每日小拷问 004 前端工程化相关

前端知识小拷问 004

---

今天的前端知识点有如下：

• 如何进行cdn托管，图片整合？
• 如何利用webpack把代码上传服务器以及转码测试？
• 项目上线流程是怎样的？
• 工程化怎么管理的?
• 如何编写一个元素拖拽的插件?
• 仓库地址：https://github.com/RiversCoder/fontend-question-ten-everyday

1. 如何进行cdn托管，图片整合？

• cdn托管：把静态资源文件和动态网页分集群部署，静态资源会被部署到CDN节点上，网页中引用的资源也会变成对应的部署路径
• 图片整合：图片压缩、整合图片，减少请求（根据情况）、base64、使用webp、字体图标
• cdn参考文档：https://juejin.im/post/59a50dc1f265da246e6e108f

2. 如何利用webpack把代码上传服务器以及转码测试？

• 代码上传服务器：

（1）使用SCP2模块自动发布编译好的代码目录 ；参考文档：https://www.jianshu.com/p/a45868f29814
（2）使用ftp-webpack-plugin自动上传同步到ftp服务器；参考文档：https://github.com/varSmallRookie/ftp-webpack-plugin
（3）使用gulp-sftp直接上传到对应服务器目录，推荐，超简单; 参考文档：https://xiaozhuanlan.com/topic/1379680524

• 转码测试：

（1）webpack+babel可以编译代码成es5, 开启工具devtool: 'inline-source-map'浏览器错误定位测试；
（2）也可以使用mocha或者karma做单元测试

3. 项目上线流程是怎样的？

• 开发 -> 合并代码到develop分支 -> 开发环境 -> 自测 -> 合并代码到stading分支-> 测试环境 -> 测试 -> 合并代码到master分支 -> gitlib自动部署构建 ->线上部署

4. 前端工程化怎么管理的?

• 模块化 （js/css）
• 组件化（ui）
• 规范化 （目录结构、编码、文档、git管理、代码审查）
• 自动化（构建、部署、测试）
• 性能优化

详细参考文档：https://www.jianshu.com/p/0d0f268ec73d

5. webpack 和gulp对比，以及如何解决webpack打包文件太大的情况?

webpack和gulp的对比

• 侧重点： webpack更加侧重模块打包，gulp更加侧重任务的流程管理
• 详细文档：https://www.cnblogs.com/RuMengkai/p/6667321.html

解决webpack打包文件太大的情况

• 生产环境，建议关闭devtool中的source-map
• 剥离css文件，单独打包 （使用插件extract-text-webpack-plugin）
• 压缩js、css文件 （使用插件UglifyJSPlugin）
• 提取公共的依赖 （使用插件CommonsChunkPlugin）
• 开启gzip压缩 （使用插件compression-webpack-plugin）
• 压缩html文件，加上版本号 （使用插件：html-webpack-plugin）