发表于 | 分类于

profile 概览

本文总结了一些首屏加载优化的webpack实践, 分为如下几个模块

  • bundle analysis 打包分析
  • code coverage 代码覆盖率
  • magic comments 魔法注释
  • prefeching/preloading 预加载
  • code splitting 代码分割
  • lazy loading 懒加载(按需加载)
  • babel, babel-polyfill与babel-runtime
  • tree shaking 摇树
  • sourcemap 源码映射配置

本文所用demo代码的仓库地址

https://github.com/atbulbs/webpack_optimization

阅读全文 »

发表于 | 分类于

Devices and Sensors 设备和传感器相关

官方文档: https://www.w3.org/das/

Vibration 震动

官方文档: https://www.w3.org/TR/vibration/
参考文档: https://www.sitepoint.com/the-buzz-about-the-vibration-api/

应用场景

  • 增强用户交互体验, 如游戏, 提醒

兼容性

compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
亲测微信小程序webview支持

demo

https://www.audero.it/demo/vibration-api-demo.html

1
2
3
4
5
6
window.navigator.vibrate(1000)
window.navigator.vibrate([1000, 1000, 2000, 1000, 3000])
// 取消震动
window.navigator.vibrate(0)
window.navigator.vibrate([])
window.navigator.vibrate([0])

Battery Status 电池状态

官方文档: https://www.w3.org/TR/battery-status/

应用场景

  • 根据电池状态做相应节能处理, 改善用户体验, 延长电池寿命
  • 在电池耗尽之前保存关键数据, 防止数据丢失

兼容性

compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery#Browser_compatibility
亲测微信小程序webview支持

阅读全文 »

发表于 | 分类于

引入 TS-Polyfill

1
$ npm i -S ts-polyfill
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'ts-polyfill'

// iOS 8, 9不能使用AudioContext播放音频
let isDisableWebAudio: boolean = false
const iOS: boolean = navigator.userAgent.match(/iPhone|iPad/i)
if (iOS) {
  let versionNum: number = parseInt((navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10)
  if (versionNum <= 9) {
    isDisableWebAudio = true
  }
}

const phaserGameConfigObject = {
  // ...
  audio: {
    disableWebAudio: isDisableWebAudio
  }, 
}

发表于 | 分类于

安装软件和插件

flutter配置

1
2
3
4
5
6
7
8
9
10
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
# 永久添加flutter到PATH, 参考
$ export PATH=$PATH:/Users/jsl/flutter/bin
$ source $HOME/.bash_profile
$ echo $PATH
阅读全文 »

发表于 | 分类于

webpack的核心定义

一个模块打包器(能识别ES Moudule和CommonJS规范和其他如css等格式的文件)

提高构建和打包效率

  • 让node和webpack版本最新

package.json文件

1
2
3
4
{
  "private": true, // 私有项目, 不会被发布到npm线上仓库
  "main": "index.js", // 被外部引用的js文件
}

npm script

1
2
3
$ npm init -y # 用默认配置初始项目
$ npm info webpack # 查看包的历史版本号
$ npx webpack -v # 使用nodemodules里的包
阅读全文 »

发表于 | 分类于

现象: push代码时gitlog出现 remote: HTTP Basic: Access denied

原因: git仓库设置了权限, You won’t be able to pull or push project code via HTTPS until you create a personal access token on your account(大白话: 无法使用HTTPS协议)

解决方案: 修改远程仓库地址为ssh协议的地址

具体操作如下:

1
2
3
4
5
6
7
8
# 两种方法

# 1 修改
$ git remote set-url origin [url]

# 2 先删后加
$ git remote rm origin
$ git remote add origin [url]

发表于 | 分类于

安装homebrew

1
2
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -v

安装node

1
2
$ brew install node
$ node -v

发表于 | 分类于

通过阅读此篇文章, 你将有如下收获

       1. 什么是vw适配
       2. vw适配的兼容性
       3. 如何在移动端H5项目webpack构建中引入vw适配
       4. 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)
       5. 我为小伙伴们准备的一波福利: 开箱📦即用的vw配置webpack构建
       6. 实际开发中vw适配的应用
       7. vw适配的坑以及爬坑姿势
       8. 文章末尾有彩蛋哟😍颠覆你的开(ban)发(zhuan)体验

阅读全文 »