前端（移动端嵌入webview）性能优化

前端（移动端嵌入webview）性能优化

项目背景

多图活动页，使用Vue-cli 脚手架搭箭项目

最开始，打开页面很慢（js，css等一系列资源全在服务器上）

第一步最有效，先尝试gzip

gzip 是什么

gzip使用Lempel-Ziv编码（LZ77）减小命名文件的大小。只要有可能，每个文件都会以扩展名为“.gz’，同时保持相同的所有权模式，访问和修改时间。（默认扩展名为“ž’（用于MSDOS，OS / 2 FAT和Atari。）如果未指定文件，或者文件名是–，标准输入被压缩为标准输出。 gzip只会尝试压缩常规文件。特别是，它将忽略符号链接。

gzip 如何配置

1 .客户端配置

npm install --save -dev compression-webpack-plugi

//vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config => {
      config.plugins.push(new CompressionPlugin({
        filename: "[path].gz[query]", //目标资源名称
        algorithm: "gzip",
        test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
        threshold: 10240,//只处理比这个值大的资源。按字节计算(楼主设置10K以上进行压缩)
        minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
      }))
		}
}

2. nginx代理

//nginx.conf
 gzip on;
    gzip_buffers 4 16k;
    gzip_comp_level 5;//压缩级别，数字越大压缩强度越大文件越小，cpu消耗更高
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png;//进行压缩的文件类型

我这份nginx文件没有考虑小文件不压缩的问题，和支持低版本浏览器的问题

阿里云数据，有明显降幅

第二步也很有效–启用cdn引入npm

npm install --save -dev html-webpack-externals-plugin

推荐去bootcdn找需要的压缩后的js和其他插件

//vue.config.js
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); 
module.exports = {
 	config.plugins.push(
   new HtmlWebpackExternalsPlugin({
        externals: [
          {
          module: 'vue',//package.json中名字
          entry: 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',//cdn链接
          global: 'Vue'//import 中取的变量名
          },
          {
            module: 'svgaplayerweb',
            entry: 'https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js',
            global: 'SVGA'
          },
          {
            module: 'vconsole',
            entry: 'https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js',
            global: 'VConsole'
          },
          {
            module: 'vue-router',
            entry: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js',
            global: 'VueRouter'
          }]
      }))
}

第三步 将图片等资源放到cdn文件存储中(企业)

不使用本地保存静态图片资源而将资源放在cdn服务器上

没了～～～～～～我是大亦，一个前端小菜鸡，还在摸爬滚打成长中。