从前端的工程化开始谈

现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量和开发速度？

概念：前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理

软件工程的概念：应用计算机科学理论和技术以及工程管理原则和方法，俺预算和尽速，实现满足用户要去的软件产品的定义、开发和维护的工程或研究的学科

前端工程化主要包括：模块化、组件化、规范化、自动化

    模块化js模块化（CommonJs AMD CMD）模块加载方式现在的es6已经在语言层面规定了模块系统 export import资源模块化（css img）组件化 组件化和模块化的区别是是颗粒程度上面的区别规范化目录结构前后端接口规范发分支管理（test master 个人分支）commit描述规范编码规范图标的规范命名规范定期的CodeReview.......自动化持续集成自动化构建（webpack）自动化部署自动化测试
复制代码

构建工具的介绍

构建工具的介绍

webpack的优化

1. webpack的tree-shaking自带的：treeshaking： js-shaking（只能简单的检测exprots， 并不能检查是否在当前作用域中是否执行） css-shaking相关plugin： webpack-deep-scope-pluginpurifycss-webpack
2.  webpack magic comments （webpack3里面刚更新的）
3.  optimization配置 （代码分离， 按需加载）runtime : webpack 运行时common： 公共的包main： 启动页所需要放的东西,主业务async-test： 异步业务
4. 开启多核压缩uglifyjs-webpack-plugin注意： 压缩es5的代码，需要转es5， 否则报错网址：https://www.npmjs.com/package/uglifyjs-webpack-pluginwebpack-paraller-uglify-plugin支持 es5 es6代码压缩uglifyJS uglifyES
5.  监控你的面板speed-measure-webpack-plugin
6.  开启一个通知面板webpack-notifier网址：https://www.npmjs.com/package/webpack-notifier
3.7 开启打包进度progress-bar-webpack-plugin线上优化1、es6不需要编译（babel-loader）大多数浏览器支持了， 但是某一些api还是浏览器没有更新支持https://cdn.polyfill.io/v2/polyfill.min.js?features%20=Map,Set2、前端缓存 小负载 webapp前端缓存的话是有很多依赖的， 例如 localstorage sessionstorage indexdb cookiea.js -》 a.xxx.jsfa.xxx.js -> 代码 后台每次计算当前包有没有发生变化 webpack-manifest-plugin 生成一个manifest.json的文件3、真正的loadding首屏渲染，单独的管理4、 单页问题 多页转单页webapp 性能好，做直出，减少请求的数量5、分析打包结果监控文件大小 bundlesize webpack-analysehttp://webpack.github.com/analyse6、test exclude include 非常重要 很快7、压缩js css压缩js：webpack-paraller-uglify-pluginhapppack 针对ts-loader 压缩css：Cssnano: https://github.com/iuap-design/blog/issues/159optimize-css-assets-webpack-plugins: 多核的压缩你的css8、devtool evalhttps://www.webpackjs.com/configuration/devtool/9、cache-loader  来做loader的缓存，加快编译的速度 增量式的
复制代码

4、构建一个多页mpa 落地用多页，切换用单页（应用的最佳方式） 前端的路由都是假的，spa中首次进入需要请求大量的js， css，我们期待直出 next(vue) nuxt（react） nest（node）