Webpack打包工具性能优化 - externals字段

前言

为什么要写这篇文章

在最近的项目中顺便学习了一下React.而React推荐使用ES6所以也顺便学习了一下ES6.然后现有浏览器不能直接支持ES6的语法因此需要第三方打包工具.这里学习使用了Webpack.然而React本身大小就有1M+.每次Webpack进行打包操作的时候总是会显得过于臃肿.消费时间近10s.因此写下本篇文章来记录自己的打包优化之路

优化方案

对于React这类第三方库而言.我们是不需要多次进行打包的因为我们本身不会对其源码进行操作修改.因此多次打包同一个包是一件多余的事情.因此我们要告诉Webpack我们不需要打包这个包.而只需要用手动的方式来直接引入预编译好的js版本即可.

解决方案

  • 在网上下载预编译好的js文件
  • 在HTML代码中(在调用打包过后的js文件前)引入预编译好的js文件
  • webpack.config.js中添加externals字段.如以下写法:

    1
    2
    3
    4
    5
    6
    module.exports = {
    externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
    }
    }
  • 删除不必要的node库,减小项目体积(如React:npm uninstall --save react react-dom)

团队使用git方法简明教程

前言

学习团队使用需要先学习如何个人使用git来管理自己的项目,如何使用git来管理自己的独立项目可以查看我之前的文章
个人使用git方法简明教程

本篇文章使用git bash作为说明工具。是为了让读者能够更好的了解git的原理(作为程序员来说了解原理比仅仅知道如何使用可能更加简单入门)。对于git原理方便以后我会专门开一篇文章介绍更加深入的内容这里不做累述

使用

一般操作流程

初次使用

1
2
3
4
5
#已有在远程仓库有项目
$ git clone [项目地址]

#本地新建项目
$ git init

平时代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#开始写项目前,拉取远程git仓库代码保证不会出现大的错误
$ git pull

#写完部分代码(即完成一阶段任务或者功能)
#一般推荐阶段划分小而多的原则
$ git status #查看变动
$ git add . #添加所有改动到准备提交队列,符号.代表所有文件
##如果仅想要单个文件或者单个文件夹下所有改动可以使用命令 git add [文件完整地址/文件夹地址]

#提交修改
$ git commit
##注意这里会弹出一个命令行编辑框,默认是使用nano,建议修改默认的命令行编辑器为vim
:wq 结束编辑
#简洁提交
$ git commit -m [message]#平时更贱推荐的方法,不方便做出比较复杂的格式只能一行,不允许有空格,换行使用\n转义字符
user
#将代码提交到远程
$ git push
#如果出现文件冲突,会导致push被拒绝。解决方案是git pull远程代码后检查冲突文件并手动解决,然后再走一遍add —> commit —> push

简单的说流程就是pull —> add —> commit —> push

特殊远程
我们在pull和push的时候可以通过在后面添加远程仓库地址 分支名的方式管理pull和push的来源。默认的远程仓库名为origin

分支管理
首先了解几个常用命令:

  • git branch 查看分支,带*号的是当前分支
  • git branch [分支名] 创建一个分支
  • git branch -d [分支名] 删除一个分支
  • git checkout [文件名或文件夹路径] 检出本地库中最新的文件(一般用于撤销文件的修改)
  • git checkout [分支名] 切换到某个分支
  • git checkout -b [分支名] 创建并切换分支
  • git merge [分支名] 将该分支合并到当前分支

操作流程:创建分支 —> 进行改动 —> 完成改动 —> 合并到主分支 —> 如有冲突手动处理冲突 —> 删除开发分支
example:

1
2
3
4
5
6
7
8
9
10
11
12
#创建分支并切换到该分支
$ git branch dev
$ git checkout dev

$ git checkout -b dev

#change file

#融合分支到主分支并删除开发分支
$ git checkout master
$ git merge dev
$ git branch -d dev

暂存工作
很多时候会遇见这样一个问题:我现在在一个独立的分支工作。而另一个分支出现了一个bug需要的紧急修改并提交,而我手头的工作还没完成一阶段内容(即无法提交一个新的commit),那么我们要如何临时保存自己的进度去切换到出现问题的分支呢?git给我们提供了一个非常实用的工具:git stash
用法很简单,简单使用只要记住两个命令即可:

  • git stash 暂存当前工作
  • git statsh pop 还原最近一次的暂存工作
    同时我们可以使用git stash list方法查看git栈中有几个工作节点
    不建议在git栈中保存多个节点容易导致混乱

知道以上几点即可简单方便的使用git工具进行团队开发了。

使用GUI进行git管理

在个人版已经推荐过了github的git客户端,但是在团队协作,特别是多人单分支团队协作中优势很不明显,无法很直观的看见各个协作者的提交情况。这里推荐另一款git图形化界面客户端:

gitg
GitKraken
PS:GitKraken默认会自动设置所有项目的作者信息为统一。多身份项目的用户需要注意一下

Atom编辑器使用记录

概述

今天安装了Github开发的开源文本编辑软件Atom感觉很不错。而且对于markdown的编写也很友好。写篇文章记录一下对于atom的使用经历。同时也可以为后来人对atom这款非常棒的编辑器的使用进行一个参考。
PS:我感觉我的 markdown pad2sublime 这两款软件可以删了

为什么选择atom

我是一个喜欢写很多语言的人。而我一般常使用的语言都是不需要太多编译器的(如C++、JAVA之类的)。因此我会经常在很多语言中来回切换:比如js、python、php这些。而运行这些语言需要的只是一个终端。我认为与其去开webstorm这样的重量级的IDE。我认为我只是需要一个编写代码的编辑器而已。因此我选择了atom。一款适合于脚本语言编写的轻量级编辑器。
我喜欢atom。我认为他在编辑器的地位就相当于chrome在浏览器的地位一样。现代、快捷、功能强大、可扩展性高,但是一般用户很少会选择。

安装

网址:
Github
官网
下载发布版本:
releases

使用

基础快捷键

调出命令控制面板 Ctrl+Shift+P

添加中文语言包

打开Settings->Install。搜索扩展包simplifed-chinese-menu,安装。实现对界面的本地化(也可以使用英文原版)。

添加中文拼写检查

扩展 项中搜索spell-check扩展。打开 设置。在locales项中写入zh_CN。完成中文拼写检测的设置(然而并没有实际拼写检查的作用)。

娱乐插件

在atom社区有一款神奇的应用。名为activate-power-mode。在文本输入框内输入文本的时候会有神奇的效果(计数,震动,粒子效果)。虽然实际上对于编程没有什么好处。但是在实际的代码编辑中不失为一种娱乐的方式。毕竟我们需要一些乐趣来为一成不变的代码编写增加娱乐。特别是当我们灵感勃发的时候
PS:如果不适应屏幕抖动的效果感觉晃眼睛的话建议关闭屏幕抖动效果仅保留粒子效果

代码测试插件

传统情况下我们要测试一行代码的结果必须运行。往往需要切出窗口然后运行代码。而atom有一个插件可以实现在编辑器中运行代码查看结果。 Script

Run scripts based on file name, a selection of code, or by line number.

代码美化插件

支持多种代码的美化操作。其名为atom-beautify。可以再设置面板中对每个语言代码进行设置。

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

图标美化插件

原始图标仅有文件夹和文件两种类型。使用file-icons插件将各个不同类型后缀的文件应用不同的图标。方便快速区分文件。

Assign file extension icons and colours for improved visual grepping

选中高亮插件

用过sublime的用户一定会知道。sublime有个特性非常好用那就是可以高亮该文档中所有被选中的文字。对于快速查找该变量的使用非常方便。而atom原生并不自带这个功能。因此有个插件能够帮助用户实现这个功能。那就是highlight-selected。简单安装后即可使用

浏览器插件

做html技术的可能会需要。因为很多时候我们并不想开个多余的浏览器(或者浏览器的标签页)。那么在编辑器中打开一个浏览器的标签页也许是个不错的选择。我喜欢atom给我拖曳的方式让我自由的修改我的工作空间。那么多多使用多个子面板。其中一个用于显示输出的结果。也许是小窗口的用户一个不错的选择
这个插件的名字叫browser-plus

网页服务器插件

atom-live-server插件可以在本地快速开启一个网页服务器,并且还自带ws服务可以提供热更新(即文件保存自动刷新)。可以说是网页、网站前端开发者必备的插件。轻量级、快速。

代码地图

小地图minimap。不多说你懂的,要是不懂我也没办法。Atom上minimap还附带一堆实用相关插件可以根据需求自行安装

Makedown文件预览插件

用于md文件的结果的预览,可以直接使用git css进行预览(需要设置)。对于用md写文章和写软件README说明很方便。

拾色器

插件名为color-picker。用交互式的方式快速让用户选取想要的颜色,并支持多种颜色格式的输出与美化

版本控制插件

git-plus。一个好用的git控制插件。虽然我个人觉得命令行更加好用但是使用图形化界面万一习惯了也是挺带感的说不定呢?

终端控制插件

platformio-ide-terminal在Atom里面试了很多个唯一能用的终端插件。虽然还有很多部分不足但是作为一个简单的终端已经够用了。当然如果喜欢用外部终端开一堆窗口的话那就不需要这款插件了。而笔者在这里是推荐能够将atom作为一个集成的环境来进行开发用。

MikuMikuCombat开发笔记 - 武器

概述

角色人物拿的或使用的武器

武器设计


  • 武器名:浮游炮
  • 功能:可以射出伤害为10的子弹,射速为每秒2发。最多可以同时存在三个浮游炮。自带40点生命值可以被摧毁

    吃我大浮游炮

  • 武器名:来复枪
  • 功能:射出高射速的子弹。对敌人造成平稳的伤害。每发子弹伤害15。用特殊攻击模式可以射出伤害为100的高爆子弹。

    我看见你们了

  • 武器名:黑刃
  • 功能:普通挥砍能造成60点的高额输出。特殊攻击模式可以发射出伤害200的黑色剑气。(贯穿伤不能穿透建筑物)

    人剑合一!

MikuMikuCombat开发笔记 - 角色

概述

目前有基于mmd的v家两位来自日本的明星初音未来与亚北加入了MMC的战场。不但能跳舞。打架也是非常的擅长!

技能设计

Miku

  • 生命值:200
  • 充能需求:1000
  • 使用武器:连射机枪
  • 伤害:15/发
  • 弹夹容量:30

    没有什么事一发子弹解决不了的。如果有,那就一梭子
    把你mikumiku掉

Akita

  • 生命值:200
  • 充能需求:800
  • 使用武器:野太刀
  • 伤害:40
  • 弹夹容量:无限

    竜人の剣を喰え(雾)