性能提升简版

性能提升：

• gzip压缩；
  
• CDN服务；
  
• 资源合并与压缩；
• 代码分割
• 图片压缩和懒加载

又拍云针对html/css/js，默认开启gzip压缩，压缩比率大约70%（这里也可以自行设置，毕竟gz解析也耗时），cdn缓存时间可自行配置；这一点就解决了前两项；

有关资源合并和压缩多是为了减少http请求和减少传输量，这个视项目设置；

用的是webpack配置好的模板：

assetsPublicPath：“”//你的cdn服务器复制代码

vue使用webpack打包后，css/js/img会经过合并压缩：

其中css压缩为app/hash/.css(可自行配置)，会被放在head头部；

js会压缩为vendor/hash/.js和app/hash/.js（可自行更改配置），会被放在body底部；

 new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks: function (module) {        // any required modules inside node_modules are extracted to vendor        return (          module.resource &&          /\.js$/.test(module.resource) &&          module.resource.indexOf(            path.join(__dirname, '../node_modules')          ) === 0        )      }复制代码

webpack模板入口设置为main.js，也就是说公共引用的部分会在这里打包，打包后文件设置如下：

 output: {    path: config.build.assetsRoot,    filename: '[name].js',    publicPath: process.env.NODE_ENV === 'production'      ? config.build.assetsPublicPath      : config.dev.assetsPublicPath  },复制代码

大部分图片存储在cdn上，小图片可以通过webpack自动转换base64，设置代码如下：

 {        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('img/[name].[hash:7].[ext]')        }复制代码

这算是雅虎军规中减少请求的一种方法；

图片懒加载比较简单就不说了；

重点说一下js的懒加载，也就是webpack的代码分割；

这里webpack将spa页面的template和script还有style转换成js；

个人理解：js引擎的执行速度比内容引擎执行速度快；

在即将进入spa页面才会请求js，这里仅需要更改路由就可以完成；

其他的小点：css公共部分提取，js共同部分提取我就不写了；

这样大致的前端架构

图只画了一半

大致是

首次请求：客户端输入url---》服务区查找html---》返回html到客户端---》客户端构建DOM树---》客户端请求cdn服务器---》cdn服务器查找js/css/img---》返回js/css/img到客户端---》客户端重新构建DOM树/css树---》客户端js发送数据请求---》服务器查询数据库---》服务器返回数据到客户端---》客户端js接收数据---》客户端构建CSS树---》客户端视图更新

非首次请求：客户端输入url---》服务器查找html---》返回html到客户端---》客户端构建DOM树--》命中缓存？使用客户端js/css/img：使用cdn上img---》客户端重新构建DOM树/css树---》客户端发送数据请求---》命中缓存？

缓存这块，js/css/img的etag和过期时间导致了是否重新请求

现在突然发现，没有考虑cdn缓存和http缓存，不过这个在我项目不存在，在某些jsp混乱的项目中存在。。。

看了一下使用公司app的统计数据；wifi和4g占据总用户和新用户绝大多数；

看了一下公司使用设备的统计数据；超大屏手机占据多大多数；

看了一下公司设备的统计数据，各款产品android和ios各有千秋；

对了还有兼容性设置，推荐使用npx查看，这里我设置的是；

 "browserslist": [    "last 7 version",    "> 1%",    "iOS >= 7",    "Android >= 3.2"  ]复制代码

也就是说，命令行输入npx browserslist可以查看自己对哪些浏览器做了兼容性设置；

npx browserslist
and_chr 64
and_ff 57
and_qq 1.2
and_uc 11.8
android 62
android 4.4.3-4.4.4
android 4.4
android 4.2-4.3
android 4.1
android 4
android 3
baidu 7.12
bb 10
bb 7
chrome 65
chrome 64
chrome 63
chrome 62
chrome 61
chrome 60
chrome 59
edge 16
edge 15
edge 14
edge 13
edge 12
firefox 59
firefox 58
firefox 57
firefox 56
firefox 55
firefox 54
firefox 53
ie 11
ie 10
ie 9
ie 8
ie 7
ie 6
ie 5.5
ie_mob 11
ie_mob 10
ios_saf 11.3
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 10.0-10.2
ios_saf 9.3
ios_saf 9.0-9.2
ios_saf 8.1-8.4
ios_saf 8
ios_saf 7.0-7.1
op_mini all
op_mob 37
op_mob 12.1
op_mob 12
op_mob 11.5
op_mob 11.1
op_mob 11
op_mob 10
opera 50
opera 49
opera 48
opera 47
opera 46
opera 45
opera 44
safari 11.1
safari 11
safari 10.1
safari 10
safari 9.1
safari 9
safari 8
samsung 6.2
samsung 5
samsung 4
复制代码

我最早有个坑就跳到了这里，最后没跳出去，当时项目废了，仅设置了几款浏览器。。。。（??????）

不过警惕，这里仅仅是针对css加了兼容头和兼容写法，而且是针对常见特性；

其实开发兼容性很重要，js兼容性虽然越来越少，但是不容小觑，当然更重要的是要有款测试机，能随时调试，我当时苦逼到上线才见到产品，所以一定要学会自己打包和调试；

抽空写篇调试的文章。。。

抽空会把图给完善一下。。。

希望能有美食能给我动力。。。