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

时间：2023-01-01 03:51:49

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

（1）添加favicon

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

<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="xxx,电商">
<meta name="description" content="xxx电商平台">
但是我们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标签里面添加：

<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="happymmall,电商">
<meta name="description" content="happymmall电商平台开发教程">
<link rel="dns-prefetch" href="//cdn.bootcss.com">
<link rel="dns-prefetch" href="//s.happymmall.com">
<link rel="dns-prefetch" href="//img.happymmall.com">
以上href的路径没有添加协议，运行的时候，如果是http协议，它就会自动添加http补全路径,如果是https协议，它就会自动添加https补全路径。

（4）对线上打包结果做回归测试

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

（5）域名规划

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

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

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

标签：

相关文章