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

野性酷女 2022-06-06 01:28 147阅读 0赞

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

（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. 接口提供的用来放我们产品的图片