[TOC] ## 前言 本文主要是针对开发、测试、生产环境的差别配置中，下面分拆一些细节的点，是对应到不同环境所对应的差别配置。 ## 接口请求方式 开发环境主要是利用proxyTable进行跨域的请求，而测试或者线上则是打包的时候通过配置文件的不同，导致请求到不同的域名地址 （直接跨域请求）。 **备注** ：这里也会因为部署策略的不同，导致解决跨域的方式不同，如果是资源部署到cdn，那么就会涉及到只能跨域请求； 而如果是部署到nginx服务器，则可以通过服务器配置进行接口的转发而不是直接请求，这里区别的就是如果使用nginx服务器，可以设置一些业务转发规则，这里的配置要分清楚是否有必要。 ## 资源部署目录 不同环境的部署服务器和目录是不一致的，webpack本地开发运行的时候是没有部署的静态资源的，而其他环境是有对应的服务器的，而不同环境可能是不同服务器，或者仅仅是不同的目录。 冗余资源的考虑： 目前的资源是全量增加的，没有做的部分 ： 1 资源增量更新没做 2 过期资源没考虑 3 资源的回退方案是做备份还是根据历史分支重新部署 ## 开发调试方式 webpack自带了热更新功能，可以实现代码的本地同步显示到浏览器，这是一方面。而线上环境的区分就是我们很多调试、逻辑部分是区分不了的，有些业务问题是无法重现的。 那么详细看下开发环境以及线上环境的方案有什么区别： ### 开发环境 断点调试，可以调试看到基本的业务逻辑以及报错信息，减少console.log的报文信息。 开发环境可以看到对应的开发源文件，而非打包后的信息，定位不到源文件。 开发环境可以找到不同的情况测试数据，可反复测试，可以去掉中间某个环节的继续，验证逻辑的严谨性。 ### 测试环境 不能很好的调试，目前没有配置对应的测试工具，没有设置拦截的工具。 可以提供不同情况的测试数据进行反复测试。 ### 生产环境 不能调试； 数据不能进行反复调试。 ## 压缩机制 ### 测试与生产环境的压缩 这里主要是涉及到项目部署之后的打包，测试与生产环境的压缩机制是一致的。那么这里简单列下可能需要做的： - 样式单独打包与拆分，压缩，兼容的处理 - js的压缩 - 代码分割 - 压缩水平的详细配置 - 增量更新 - 公共文件的更新 - 兼容配置，babel的配置水准，异步编程的支持