Webpack 打包优化

速度优化

  1. 减小文件搜索范围

    • 配置 resolve.modules:

      Webpack 的 resolve.modules 配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(alias)的配置,亦当如此:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      function resolve (dir) {
      return path.join(__dirname, '..', dir)
      }
      module.exports = {
      resolve: {
      extensions: ['.js', '.vue', '.json'],
      modules: [
      resolve('src'),
      resolve('node_modules')
      ],
      alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      // ...
      'store': resolve('src/store')
      }
      },
      ...
      }

Yeoman Generator 开发

Yeoman 是干什么的?

Yeoman 是一个脚手架生成工具,负责生成一个项目的基本解构,能够节省重复劳动,提升开发体验。

开发

Yeoman 为我们提供了 Generator 的基类,于是:

1
2
3
4
5
6
7
8
const generators = require("yeoman-generator");

module.exports = generators.Base.extend({
constructor: function () {
generators.Base.apply(this, arguments)
// your logic
}
})

Docker 安装及常用命令

CentOS7 安装 Docker 和 Docker-compose

安装 Docker:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 安装依赖
sudo yum install -y yum-utils \
device-mapper-persistent-data \
lvm2

# 添加 docker 下载仓库
sudo yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo

# 安装 docker-ce
sudo yum install docker-ce

# 启动 docker
sudo systemctl start docker

# 设置开机启动
sudo systemctl enable docker

# 验证
sudo docker --version

sudo docker run hello-world

Web 字体

Serif 和 Sans-serif 字体的区别

在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif 和 Serif,打字机体虽然也属于 Sans Serif,但由于是等宽字体,所以另外独立出 Monospace 这一种类,例如在 Web 中,表示代码时常常要使用等宽字体。

Serif 的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔划的粗细会因直横的不同而有不同。相反的,Sans Serif 则没有这些额外的装饰,笔划粗细大致差不多。如下图:

serif && sans-serif

可以看出,我们平时所用的 Georgia、Times New Roman 等就属于 Serif 字体,而 Arial、Tahoma、Verdana 等则属于 Sans Serif 字体。对中文而言,同样存在这两大种类,很明显,宋体、细明体(繁体中常用)等就属于 Serif,而黑体、幼圆等则属于 Sans Serif。

NodeJS 命令行开发

可执行脚本

首先,使用 JavaScript 语言,写一个可执行脚本 hello

1
2
#!/usr/bin/env node
console.log('hello world');

然后,修改 hello 的权限:

1
chmod 755 hello

现在,hello 就可以执行了:

1
2
$ ./hello
hello world

Shell 编程规范

Shell 是用户与 Linux 或 Unix 内核通信的工具,shell 编程指的并不是编写这个工具,而是指利用现有的 shell 工具进行编程,写出来的程序是轻量级的脚本,我们叫做 shell 脚本。

Shell 的语法是从C语言继承过来的,因此我们在写 shell 脚本的时候往往能看到C语言的影子。

Shell 脚本实在是太灵活了,相比标准的 Java、C、C++ 等,它不过是一些现有命令的堆叠,这是他的优势也是他的劣势,太灵活导致不容易书写规范。以下整理本人在写 shell 脚本的过程中形成了自己一些规范,这些规范还在实践中,在此分享出来,以期更多的人来帮助我完善。

Browserslist 配置说明

背景

Browserslist 定义了一套浏览器兼容配置标准,使得众多前端开发工具(Autoprefixer, Babel, Stylelint…)之间可以共享同一套配置。

查询标准

工具将从以下路径查询 browsers 配置:

  1. 当前目录或父级目录的 package.json 文件里的 browserslist 配置(推荐
  2. 组件自身配置项(比如,Autoprefixer 中的 browsers 配置项)
  3. BROWSERSLIST 环境变量
  4. 当前目录或父级目录的 browserslist 配置文件
  5. 当前目录或父级目录的 .browserslistrc 配置文件
  6. 如果以上配置均不能提供一个有效的配置,Browserslist 将采用默认配置:> 0.5%, last 2 versions, Firefox ESR, not dead

Crontab 定时任务配置

基本格式

1
2
3
4
5
6
7
8
# Example of job definition:
# .---------------- minute (0 - 59)
# | .------------- hour (0 - 23)
# | | .---------- day of month (1 - 31)
# | | | .------- month (1 - 12) OR jan,feb,mar,apr ...
# | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
# | | | | |
# * * * * * user-name command to be executed

Service Worker 实践

Service Worker 的生命周期

Service Worker 脚本通过 navigator.serviceWorker.register 方法注册到页面,之后可以脱离页面在浏览器后台运行:

1
2
3
4
5
6
7
8
9
10
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('service worker 注册成功');
})
.catch(function (err) {
console.log('servcie worker 注册失败');
});
}

出于安全原因, Service Worker 脚本的作用范围不能超出脚本文件所在的路径。比如地址是 /sw-test/sw.js 的脚本只能控制 /sw-test/ 下的页面。

Service Worker 从注册开始需要先 install, 如果 install 成功, 接下来需要 activate, 然后才能接管页面。但是如果页面被先前的 Service Worker 控制着, 那么它会停留在 installed(waiting) 这个阶段等到页面重新打开才会接管页面, 或者可以通过调用 self.skipWaiting() 方法跳过等待。所以一个 Service Worker 脚本的生命周期有这样一些阶段(从左往右):

浏览器的协商缓存与强缓存

什么是浏览器缓存

浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。

浏览器缓存的优点有:

  1. 减少了冗余的数据传输,节省了网费

  2. 减少了服务器的负担,大大提升了网站的性能

  3. 加快了客户端加载网页的速度