网络安全起点
RSS
热门关键字:  
当前位置 :| 首页 > WEB

搭筑一个vue-cli4+webpack搬动端框架(开箱即用)

来源:本站 作者: 时间:2020-05-17 10:27:28 点击:

  这是基于 vue-cli4 实现的移动端框架,其中包含项目常用的配置,组件封装及webpack优化方法□□,可供快速开发使用。

  // 安装依赖npm install// 本地启动npm run dev// 生产打包npm run build复制代码在一两年前,vue-cli3已经声驾到3.0+版本□□,但是由于旧项目一致习惯于vue-cli2的脚手架的使用,之前也写过一篇 搭建一个vue-cli的移动端H5开发模板 简单总结了一点移动端的开发技巧。

  近日升级vue-cli脚手架才发现,这已经升级到4.0+版本了,觉得很多必要在新的项目中使用vue-cli4进行开发,加上近来对webpack有了进一步理解□□□□,所以结合了vue-cli4和webpack搭建了一个移动端框架,以便开箱即用。 主要包括如下技术点:

  vant 是一套轻量、可靠的移动端 Vue 组件库,非常适合基于 vue 技术栈的移动端开发。在过去很长的一段时间内□□,本人用的移动端 UI 框架都是 vux。后来由于 vux 不支持 vue-cli3□□□,就转用了 vant,不得不说,无论是在交互体验上,还是代码逻辑上,vant 都比 vux 好很多,而且 vant 的坑比较少。

  对于第三方 UI 组件□□□□,如果是全部引入的话,比如会造成打包体积过大□□□,加载首页白屏时间过长的问题□□,所以按需加载非常必要。vant 也提供了按需加载的方法。babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

  你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式

  移动端适配是开发过程中不得不面对的事情。在此□□□□,我们使用 postcss 中的 px2rem-loader,将我们项目中的 px 按一定比例转化 rem,这样我们就可以对着蓝湖上的标注写 px 了。

  我们将 html 字跟字体设置为 100px,很多人选择设置为 375px,但是我觉得这样换算出来的 rem 不够精确,而且我们在控制台上调试代码的时候无法很快地口算得出它本来的 px 值。如果设置 1rem=100px,这样我们看到的 0.16rem,0.3rem 就很快得算出原来是 16px□□,30px 了。

  路由懒加载配置改变单页面应用的 title登录权限校验页面缓存配置路由懒加载配置

  由于单页面应用只有一个 html,所有页面的 title 默认是不会改变的,但是我们可以才路由配置中加入相关属性,再在路由守卫中通过 js 改变页面的 title

  在应用中,通常会有以下的场景□□,比如商城:有些页面是不需要登录即可访问的,如首页□□,商品详情页等,都是用户在任何情况都能看到的;但是也有是需要登录后才能访问的□□□□,如个人中心□□,购物车等。此时就需要对页面访问进行控制了。

  此外,像一些需要记录用户信息和登录状态的项目□□,也是需要做登录权限校验的,以防别有用心的人通过直接访问页面的 url 打开页面。

  项目中,总有一些页面我们是希望加载一次就缓存下来的,此时就用到 keep-alive 了。keep-alive 是 Vue 提供的一个抽象组件□□□□,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在 v 页面渲染完毕后不会被渲染成一个 DOM 元素。

  1、通过配置路由的 meta 对象的 keepAlive 属性值来区分页面是否需要缓存

  首先我们先来了解一下环境变量,一般情况下我们的项目会有三个环境,本地环境(development),测试环境(test)□□□,生产环境(production)□□□□,我们可以在项目根目录下建三个配置环境变量的文件.env.development□□,.env.test,.env.production

  vue-cli3 开始,新建的脚手架都需要我们在 vue.config.js 配置我们项目的东西。主要包括

  打包后文件输出位置关闭生产环境 souecemap配置 rem 转化 px配置 alias 别名去除生产环境 console跨域代理设置此外,还有很多属于优化打包的配置,后面会一一道来。

  在开发项目过程中□□□□,通常会用到很多功能和设计相类似的组件,toast 和 dialog 组件基本是每一个移动端项目都会用到的。为了更好匹配自己公司的 UI 设计风格,我们没有直接用 vant 的 toast 和 dialog 组件□□,而是自己封装了类似的组件□□□,可供直接调用□□□□,如:

  从这里开始,我们开始进行 webpack 优化打包。首先我们来分析一下 webpack 打包性能瓶颈,找出问题所在□□,然后才能对症下药。此时就用到 webpack-bundle-analyzer 了。 1、安装依赖

  打包出的文件中都包含了什么□□,以及模块之间的依赖关系每个文件的大小在总体中的占比□□□□,找出较大的文件,思考是否有替换方案,是否使用了它包含了不必要的依赖□□?是否有重复的依赖项,对此可以如何优化?每个文件的压缩后的大小。CDN 资源优化

  CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容□□,降低网络拥塞□□,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。

  随着项目越做越大,依赖的第三方 npm 包越来越多,构建之后的文件也会越来越大。再加上又是单页应用,这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法,优化网络加载速度。

  不过现在有不少声音说,vue 全家桶加载 CDN 资源其实作用并不大,而且公共的 CDN 资源也没有 npm 包那么稳定□□□,这个就见仁见智了。所以我在源码时新建的分支做这个优化。当项目较小的就不考虑 CDN 优化了。

  当然□□□□,当引入其他较大第三方资源□□□□,比如 echarts,AMAP(高德地图)□□□□,采用 CDN 资源还是很有必要的。

  所有现代浏览器都支持 gzip 压缩,启用 gzip 压缩可大幅缩减传输资源大小,从而缩短资源下载时间,减少首次白屏时间□□□□,提升用户体验。

  gzip 对基于文本格式文件的压缩效果最好(如:CSS、JavaScript 和 HTML)□□□□,在压缩较大文件时往往可实现高达 70-90% 的压缩率,对已经压缩过的资源(如:图片)进行 gzip 压缩处理,效果很不好。

  随着 SPA 在前端界的逐渐流行□□□□,单页面应用不可避免地给首页加载带来压力□□□□,此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。

  所谓的骨架屏,就是在页面内容未加载完成的时候□□□,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现□□□,降低了“白屏”的不良体验。

  1、在src的common文件夹下面创建了Skeleton1.vue,Skeleton2.vue,具体的结构和样式自行设计,此处省略一万字。。。。

最新评论共有 位网友发表了评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
验证码:
匿名?