网站建设技术指标,有专门做网站的公司,深圳哪家网站建设的公司好,如何建立一个网站放视频前言 基于公司的业务以及今年接触到的项目大部分都是APP混合开发#xff0c;即原生Android/ios H5页面开发APP。项目从产品需求的评审到方案的评审再到开发提测...这一套流程下来让我收货颇多。总想找个时间好好记录一番#xff0c;大概还是自己懒惰了#xff0c;一直拖到现…前言 基于公司的业务以及今年接触到的项目大部分都是APP混合开发即原生Android/ios H5页面开发APP。项目从产品需求的评审到方案的评审再到开发提测...这一套流程下来让我收货颇多。总想找个时间好好记录一番大概还是自己懒惰了一直拖到现在。想记录的东西太多了一次讲完也没有突出的重点我今天最想记录的是关于H5资源打包优化的问题。以前常常看到一些大V长篇大论的在讲各种优化问题自己没有真正动手去实践过的话也不明所以也不明白优化的重要性。现在还真想感叹一句小小的优化真的能大大提高用户体验何乐而不为呢嘿嘿~好了废话说的有点多接下来我们就直接进入主题吧
现有的问题
基于我实际基础的混合APP开发中H5打包资源得出了如下问题结论
1.第三方库为分包全部资源打包成一个js文件导致文件过大。虽然说现在手机的更新迭代很快在性能好的手机上能够快速加载但是开发APP我们肯定也是需要兼容一些老旧的设备机的那么在性能较差的设备加载的时间就会过长甚至会出现等待时间过长而显示白屏的情况。 2.第三方组件库没有按需导入
Vant组件库全引入全资源包200kbEchart全引入全资源包 800kb
3.引入的图片没有进行压缩处理
4.过多的注释代码没有被移除全部打包到了静态资源中 准备工作
由于我的项目中用到的打包工具是webpack所以这里引入webpack-bundle-analyzer第三方插件以方便分析打包资源各个模块的占比情况。
webpack-bundle-analyzer插件是什么
webpack-bundle-analyzer是webpack的插件需要配合webpack和webpack-cli一起使用。这个插件可读取输出文件夹通常是dist中的state.json文件把该文件可视化展示生产代码分析本报告可以直观地分析打包出的文件有哪些以及它们的大小、占比情况各文件Gzippped后的大小、模块包含关系、依赖项等。从而我们可以从其中的数据进行分析做出对应的优化从而帮助提升代码质量和软件性能。
安装
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
使用方法 webpack-bundle-analyzer的使用方式可以分为两种 分别是作为插件使用和作为一个cli的一个工具使用我这里主要将其作为插件的使用方式
作为插件使用
1.在vue.config.js中配置webpack-bundle-analyer
....
chainWebpack(config){....if (process.env.NODE_ENV development) {config.plugin(webpack-bundle-analyzer).use(require(webpack-bundle-analyzer).BundleAnalyzerPlugin);}....
}
2.运行 npm run serve/dev 查看可视化的静态资源包 分析依赖包移除 无用依赖抽取三方依赖
从上图我们也可以看出暴露出的问题也就是我在文章最开始的时候说的那几个问题接下来为我们将对症下药针对项目中存在的问题进行优化
优化方案
第三方库使用CDN加载 我们都知道使用vue/cli脚手架构建Vue的全家桶项目打包后会吧vue、vue-router、axios、vuex、第三方组件库例如vant、echart等打包在一起导致基础chunk、vender包体积特别大有时一个文件能达到3-5mb这会大大影响首次加载速度因此需要抽离第三方公共库配合CDN加速。
首先我们先看一下我在项目中所用到的依赖 分析 项目整体使用了vant、axios、数据可视化引入了Echart等这些库本身体积就不小打包到一起后体积更大
优化配置
为了方便以后管理将CDN相关所有配置写入cdn.config.js与vue.config.js同级
1.cdn.config.js配置
module.exports {// 是否使用cdnuseCDN: true,// key是包名, value是静态资源引入后全局的名称 import Vue from vue// 忽略打包的第三方库externals: {vue: Vue,vuex: Vuex,vue-router: VueRouter,axios: axios,echarts: echarts,// 必须是ELEMENT否则会报‘elementUI is not defined’vant: vant},//通过cdn方式引入cdn: {// CDN链接地址https://www.jsdelivr.com/css: [//由于项目中没有引入第三方css所以这里举例的是element-ui的csshttps://cdn.jsdelivr.net/npm/element-ui2.15.3/lib/theme-chalk/index.css],js: [https://cdn.jsdelivr.net/npm/vue2.6.11,https://cdn.jsdelivr.net/npm/vue-router3.2.0/dist/vue-router.min.js,https://cdn.jsdelivr.net/npm/vuex3.4.0/dist/vuex.min.js,https://cdn.jsdelivr.net/npm/echarts5.2.1/dist/echarts.min.js,https://cdn.jsdelivr.net/npm/vant2.15.3/lib/vant.min.js,https://cdn.jsdelivr.net/npm/axios0.21.1/dist/axios.min.js,]}
}
注意上方的js文件cdn连接也可以通过下载下来下载压缩版放在public文件夹中
2.配置vue.config.js第三方库的externals、设置生成html
const cdnConfig require(./cdn.config.js);
const isProduction process.env.NODE_ENV production;....
configureWebpack:{....// 打包忽略以下第三方库externals: isProduction cdnConfig.useCDN ? cdnConfig.externals : {}....
}
...
chainWebpack(config){....// 注入cdn startconfig.plugin(html).tap(args {args[0].minify.removeAttributeQuotes false; // 引入打包的双引号否则本地静态资源读取不到// 生产环境或本地需要cdn时才注入cdnif (isProduction) args[0].cdn cdnreturn args;})// 注入cdn end....
3.设置public/index.html
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width,initial-scale1.0 /link relicon href% BASE_URL %favicon.ico /!-- 使用CDN的CSS文件 --% for (var i in htmlWebpackPlugin.options.cdn htmlWebpackPlugin.options.cdn.css) { %link href% htmlWebpackPlugin.options.cdn.css[i] % relstylesheet /% } %!-- 使用CDN的CSS文件 --titleAPP/title/headbodynoscriptstrongerrorTip/strong/noscriptdiv idapp/div!-- 使用CDN的JS文件 --% for (var i in htmlWebpackPlugin.options.cdn htmlWebpackPlugin.options.cdn.js) { %script src% htmlWebpackPlugin.options.cdn.js[i] %/script% } %!-- 使用CDN的JS文件 --!-- built files will be auto injected --/body
/html
使用splitChunks进行代码分割 在说splitChunks之前我们需要明白module、chunk和bundle这三个名词是什么意思
module就是js的模块化webpack支持commonJs、ES6等模块化规范简单来说就是你通过import语句引入的代码chunkchunk是webpack根据功能拆分出来的包含三种情况 你项目的入口entry通过import()动态引入的的代码通过splitChunks拆分出来的代码chunk包含 module可能一对多也可能是一对一bundlebundle是webpack打包之后的各个文件一般就是和chunk是一对一的关系bundle就是对chunk进行编译压缩打包等处理之后的产出 为了避免一次加载过大的文件和充分利用浏览器缓存我们需要将不经常被修改的文件单独打包即对项目中的代码进行分割。其中第三方依赖库通用组件、静态资源、工具库等都可以金秀贤代码分割。在webpack中不进行配置的话默认打包是将所有业务代码和第三方库都是打包到bundle.js文件中的。预想将代码或者第三方库在打包的时候进行分割处理那么就要用到optimization.splitChunks配置项不同的配置方式将得到不同的代码分割效果。
....
chainWebpack(config) {....config.optimization.splitChunks({chunks: all,//表示选择哪些模块进行优化。有效值为all、async和initial默认是仅对异步加载的块进行分割minSize: 100000, // 模块大于minSize时才会被分割出来。默认100kmaxSize: 200000, // 生成的块的最大大小如果超过了这个限制大块会被拆分成多个小块。minChunks: 1, // 拆分前必须共享模块的最小块数。maxAsyncRequests: 5, // 按需加载时并行请求的最大数目。maxInitialRequests: 3, // 入口点的最大并行请求数automaticNameDelimiter: ~, // 默认情况下webpack将使用块的来源和名称例如vendors~main.js生成名称。此选项允许您指定要用于生成的名称的分隔符。automaticNameMaxLength: 30, // 允许为SplitChunksPlugin生成的块名称的最大长度cacheGroups: {libs: {// 第三方库name: chunk-libs,test: /[\\/]node_modules[\\/]/,// 控制此缓存组选择的模块省略它将选择所有模块它可以匹配绝对模块资源路径名称匹配快名称时将选择模块中所有模块priority: 10, // 一个模块可以属于多个缓存组模块出现在优先级最高的缓存组中chunks: initial, // 只打包初始时依赖的第三方},commons: {// 公共模块包name: chunk-commons,test: resolve(src/components),minChunks: 3, // minimum common numberpriority: 5,reuseExistingChunk: true,// 如果当前快包含已经从主包中分离出来的模块那么该模块将被重用而不是生成新的模块},},});....
}
....
使用代码压缩钱打包的文件 使用代码分割后打包后的文件 按需引入第三方组件库
Vant的按需引入Vant 2 - Mobile UI Components built on Vue Echart的按需引入在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts 压缩图片 在webpack的思想中一切皆模块所有模块、样式、图片等等这些资源都是模块、因为这些资源也具备模块的特性--他们都复制特定的职能并且具有可复用性。因此我们可以使用webpack去管理所有这些资源并且它们都当作模块来处理。 静态资源指前端中常用的图片富媒体(Video、Audio、字体文件等。webpack中静态资源也可以作为模块直接使用的。webpack提供了很多插件和loader对图片进行压缩、合并(CSS Sprite)。webpack还会使用url-loader等插件将较小的资源通过Base64的方式引入。当项目足够大了之后配置太多的静态资源处理流程也会影响webpack的打包速度。 针对图片资源通常有jpg|jpeg|png|gif|ico等格式静态资源指前端中常用的图片针对大图片通常使用image-webpack-loader插件压缩一下、小图片使用url-loader转成base64并比较前后优化差别。
url-loader的使用
首先url-loader和image-webpack-loader都依赖于file-loaderfile-loader简言之就是一个资源加载模块去找文件资源的loader然后也可以给静态资源生成哈希值即唯一识别身份证。我们主要通过url-loader和image-webpack-loader做相关对应的配配置。
1 安装url-loader
npm i url-loader file-loader --save
2 使用url-loader转成base64格式的效果 image-weback-loader的使用
1.安装image-weback-loader
注意点若有报错大家可以下载指定的稳定版本以使用
npm install image-webpack-loader --save-dev
2.压缩前后效果对比 两个loader的完整配置
我这里使用vue项目所以在配置文件vue.config.js中的chainWebpack加上以下代码即可
chainWebpack(config) {config.module.rule(images).test(/\.(jpg|jpeg|png|gif|ico)$/) // 给这些图片类型做压缩.use(url-loader) // url-loader要搭配file-loader做图片压缩.loader(url-loader).options({limit: 1024 * 12,// 小于12kb的图片压缩成base64图片太大转成base64反而不太合适name: static/img/[name].[ext]//指定打包后的图片存放的位置一般放在static下img文件夹里 name.ext分别为文件名.文件后缀按照原图片名}).end() // 返回上一级 以便于继续添加loader.use(image-webpack-loader).loader(image-webpack-loader).options({disable: process.env.NODE_ENV development ? true : false, // 开发环境禁用压缩生产环境才做压缩提升开发调试速度mozjpeg: { quality: 60 }, // 压缩JPEG图像压缩质量quality为60范围0到100optipng: { enabled: true }, // 压缩PNG图像enabled为true开启压缩pngquant: { quality: [0.65, 0.90], speed: 4 }, // 质量区间和速度就使用默认值吧gifsicle: { interlaced: false }, // Interlace gif for progressive rendering 默认falsewebp: { quality: 60 } // 压缩webp图片压缩质量quality为60范围0到100}).end() // 返回上一级 继续添加loader.enforce(post) // 表示先执行配置在下面那个loader即image-webpack-loader
},Tree Shaking
Tree Shaking指的是当我们引入一个模块的时候我不引入这个模块的所有代码我只因日我需要的代码那么就需要Tree Shaking这个功能来帮我们实现。
官方有标准的说法Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中编译器可以判断出某些代码根本不影响输出然后消除这些代码这个称之为DCEdead code elimination 在weebpack项目中有一个入口文件这个入口文件就相当于一棵树 的主干入口文件中有很多依赖的模块相当于树枝5.实际情况下虽然依赖了某个模块但其实只使用了其中的某些功能。通过Tree-Shaking将没有使用的模块摇掉以达到删除无用代码的目的。
而webapck5已经自带了这个功能当打包环境是production时默认开启tree-shaking若想在开发模式下配置tree shaking在vue.config.js中加上如下即可
optimization: {usedExports: true
}
注意也可以通过sideEffects设置不需要被tree shaking的模块那么我们肯定会想到为什么需要对一些特定的模块不做哦tree-shaking处理呢不是所有的模块都精简删除无用的代码是最好的效果吗其实不是的。因为在项目中我们肯定也会自定义去规划一些css文件但是由于css文件没有导出任何模块那么就有可能在打包的时候该引入的模块就被摇晃掉了导致bug那么此时我们就可以在package.json中设置如下即匹配到的任何css文件都不进行Tree Shaking webpack的Gzip和服务端的Gzip
一般来水Gzip压缩是服务器的活儿服务器了解到我们这边有一个Gzip压缩的需求它会启动自己的CPU去为我们完成这个任务。而压缩 文件这个过程本身是需要耗费时间的可以理解为我们以服务器压缩的时间开销和CPU开销以及浏览器解析解析压缩文件的开销为代价省下了一些传输过程中的时间开销。
既然存在这样的交换那么就要求我们学会权衡。服务器的CPU性能不是无限的如果存在大量的压缩需求服务器也是扛不住的。服务器一旦因此慢下来了用户还是要等webpack中的gzip压缩操作的存在事实上就是为了构建过程中去做一部分服务器的工作为服务器分压。
因此不管是webpack的Gzip还是服务器的Gzip谁也不能替代谁应该结合业务压力的实际强度情况去做好其中的权衡。
实现
不是每个浏览器都支持Gzip如何知道客户端是否支持Gzip呢请求头中有个Accept-Encoding:gzip来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩发方式服务器配置启动压缩压缩的文件类型压缩方式。当客户端请求到服务端的时候服务器解析请求头如果客户端支持Gzip压缩响应式对请求的资源进行压缩并返回客户端浏览器按照自己的方式解析在http响应头我们可以看到content-encoding:gzip这是指的服务端使用了Gzip的压缩方式 配置Gzip
1.安装compression插件
npm install compression-webpack-plugin --s
2.配置vue.config.js const CompressionPlugin require(compression-webpack-plugin); // 引入....config.plugin(compressionPlugin).use(new CompressionPlugin({algorithm: gzip,test: /\.js$|\.css$|\.html$/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩minRatio: 0.8,//压缩比deleteOriginalAssets: false // 不能删除源文件不然报错Uncaught SyntaxError: Unexpected token }))
.... 3.配置nginx支持gzip的操作
# 前端将文件打包成.gz文件然后通过nginx的配置让浏览器直接解析.gz文件可以大大提升文件加载的速度。
http {# nginx开启Gzip若没有找到.gz会动态压缩因此建议前端打包成.gz文件# 是否启用Gzipon为启用off为关闭gzip on;# 设置允许压缩的页面最小字节数页面字节数从header头中的Content-Length中进行获取。默认值是0不管页面多大都压缩。建议设置成大于1k的字节数小于1k可能会越压越大。gzip_min_length 1k;# 获取多少内存用于缓存压缩结果‘4 16k’表示以16k*4为单位获得gzip_buffers 4 16k;# Gzip压缩比1~9越小压缩效果越差但是越大处理越慢所以一般取中间值;gzip_comp_level 5;# 对特定的MIME类型生效,其中text/html被系统强制启用少啥类型就添加啥gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# 识别http协议的版本,早起浏览器可能不支持Gzip自解压,用户会看到乱码gzip_http_version 1.1;# 启用应答头Vary: Accept-Encodinggzip_vary on;# 配置禁用 gzip 条件支持正则此处表示 ie6 及以下不启用 gzip因为ie低版本不支持gzip_disable MSIE [1-6]\.;
}gzip的优缺点 优点
减少文件大小Gzip压缩比率在3-10倍左右可以大大节省服务器的网络带宽。而在实际应用中并不是对所有的文件都进行压缩通常只是压缩静态文件。与此同时减少文件大小有两个明显的好处
减少存储空间通过网络传输文件时可以减少传输事件以加快网站的打开速度
缺点
需要nginx、服务端的支持占用了一些服务器和客户端的CPU操作失误会造成网站无法访问蜘蛛无法进行爬行造成收录不佳谷歌可以完美支持Gzipp压缩百度支持的并不是很友好
