【web前端自动化工作环境配置】11. 生产环境的适配

最近项目上线了,对上线前的准备做一下总结,开发环境上所写的代码只能是在开发环境上做预览,离上线到生产环境还是有一些工作要做的,首先是生产环境的适配,在做生产环境适配的时候,要从如下几点:

(1)添加favicon

这是网站的一个标志,favicon和下面要说的dns-prefetch都是要放到head标签里面,所以可以在如下的代码里面写:




但是我们webpack里面用了一个HtmlWebpackPlugin,这个plugin是支持favicon的,并不用我们手动去写,它也会像js,css一样自动帮我们插入一个favicon的图标,如下代码:

//获取html-webpack-plugin参数的方法
var getHtmlConfig=function(name,title){
    return {
        template:'./src/view/'+name+'.html',
        filename:'view/'+name+'.html',
        favicon:'./favicon.ico',
        title:title,
        inject:true,
        hash:true,
        chunks:['common',name]
    }
};

(2)线上域名的分离,HTML路径的简化

在开发环境的时候,引用资源都是使用localhost:8080-dist,但是到了线上,我们html页面和其他静态文件的域名是要分开的,并且还要对html的路径做一下简化。

    output:{
        path:__dirname+'./dist/',
        publicPath:'dev'===WEBPACK_ENV ? '/dist/' :'//s.happymmall.com/mmall-fe/dist/',
        filename:'js/[name].js'
    },

(3)添加dns-prefetch

dns-prefetch的作用:通过一张图片的请求为例作为说明,在没有dns-prefetch的时候,正常的请求应该是等图片加载的时候然后做DNS解析,和后端通信做数据传输,有了dns-prefetch,页面一进来就会把DNS的解析工作完成,等发出图片请求的时候,就可以直接做数据传输了,这样会加快资源的加载速度。dns-prefetch需要我们在head标签里面添加:







以上href的路径没有添加协议,运行的时候,如果是http协议,它就会自动添加http补全路径,如果是https协议,它就会自动添加https补全路径。

(4)对线上打包结果做回归测试

因为我们开发和线上用的是不同的打包方式,线上的做了压缩,这样就会造成有不一致的地方出现,我们在开发时做的测试,就不能被完全信任,所以在做完生产环境的适配以后,我们要对全站做一个回归,来保证我们上线的代码是经过测试的

(5)域名规划

html-->www. 放在主站的域名上

js+css-->s. 静态资源

image-->img. 接口提供的用来放我们产品的图片

你可能感兴趣的:(【Web前端】)