前端性能优化-多环境部署

35 阅读1分钟

webpack默认的打包是production模式,并且只内置了production,development,2种模式,默认production打包会执行压缩;

网上很多多环境打包是直接配置 NODE_ENV = “xxx”,这样执行打包虽然会成功,但是没有压缩,不是我们想要的效果,说通俗些我们想要的效果就是打包出来的文件和直接build出来是一样的,只是配置的环境地址不同。

在根目录新建.env.test,开启打包压缩NODE_ENV = 'production',

NODE_ENV = 'production'  //这里是标注模式,webpack只内置了production,development,2种模式,如果写其他的,能正常打包出来,但打包结果不会压缩,如果不想这样写,也可以自己去其他地方配置。甚至可以不写,不写就是默认的。

最好全局搜索一下production,看看有没有其他地方是需要加上test环境,我这里的文件导入路径就是需要区分,这里是解决打包后路由跳转空白页面问题

image.png

然后nginx开启gzip,建议开启优化加载速度

gzip on; 
gzip_min_length 1k;
gzip_comp_level 9; 
gzip_types text/plain application/javascript

application/x-javascript text/css application/xml text/javascript application/x-httpd-php 

image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\.";