好久没水文章了

还记得刚刚开始玩 webpack 的时候就想着 webpack-dev-server 在本地搞开发这么好用，那我能不能给弄到服务器上让它也能一直在后台运行呢，这样即使在开发阶段也能实时看到进展，当然很多人都不建议这样做，但肯定是可以实现的，下面就去实现它吧。

Tmux

终端神器之一，开个后台进程让用户退出服务器也保持运行这种事对 tmux 来说根本就是小菜一碟。

安装：通过 apt-get、yum、homebrew 等工具安装即可。

然后进行以下操作（输入终端命令）：

1、

tmux new -s <session_name>

新建一个 session 会话，名字就是你指定的 session_name ，执行这条指令后会弹出一个新的界面覆盖原来的界面。

2、进入工程目录，启动 webpack-dev-server 服务器。

这里我在 package.json 中的 scripts 中添加了一条自定义项以方便操作。

注意红色圈中的部分，如果你使用 docker 等容器或虚拟机等，--host 0.0.0.0 是必不可少的，另外 --public <host>:<port> 为了让所有人都能访问到也是必须的，host 就是蓝色划掉的部分，是你的服务器公网IP地址。

然后 npm run dev 即可启动了，其实跟你在本地操作是一样的，接下来你看到的东西也跟本地操作时一样。

3、保持上面操作的 session 在后台运行，返回之前的终端界面。

先同时按一下 control + B 两个键，随即再按一下 D 键。

我们返回了最开始的终端界面，即使退出服务器 webpack-dev-server 也在创建好的 session 中保持运行。

4、如果我想重新进入创建过的 session 中继续操作呢。

输入 tmux ls ，我们就会看到所有创建过的 session 会话。

tmux attach -t <session_name>

输入这条指令我们就可以重新进入名字为 session_name 的 session 会话界面然后继续操作了。

写到这里，我们的想要实现的事情已经很好的解决了。但是，tmux 的功能远不止于此，如果你使用 Mac 中的 iTerm2，那么想必 tmux 你也会很乐于使用，各种操作 window 窗口，将一个窗口随意的横竖划分成不同的面板，配合上快捷键简直不要太好用。

webpack

既然说了 webpack 的内容，再接着写点东西好了。

一、分析工具

想要缩小打包体积，优化响应速度，有效的 bundle 分析工具肯定是必不可少的，下面介绍三种：

1、analyse：可以很清晰的看出依赖库的情况，便于逐个检查。

2、webpack-chart：优美的图形展示，可以一层层点进去查看。

上面两个工具不需要安装依赖包，只需要将记录打包数据的 stats.json 文件上传到各自的官网即可。

3、webpack-bundle-analyzer：需要在项目中安装依赖包，并在 webpack.config.js 中添加它的 plugin 插件，生成的图形是网格形状，也很好用。

二、简单优化

对于 antd ，使用官方推荐的方式按需引入。

对于 moment ，同样使用官方推荐的 IgnorePlugin 即可。

通过 DefinePlugin 定义生成环境。

必不可少的 UglifyJsPlugin 压缩文件，这货效果杠杠的。

分离 css 样式文件，浏览器对 js 和 css 的处理是不同的，分离对缩小加载时间有很大的帮助。

使用 ModuleConcatenationPlugin 提升下作用域，webpack 打包本身会产生很多闭包的情况，这会降低 JS 引擎的执行效率，不过这个插件老实说效果并不明显。

贴个图吧：

其实关于优化，这只是基本的，还有可以改进的余地，另外对于 echarts 的处理，通过 externals 然后 CDN 引入的方式其实并没有什么卵用，从另一个角度来看，一方面是操作虚拟DOM，另一方面是操作真实DOM，或许两者本身存在难以逾越的鸿沟。

就这样吧，本篇完结撒花。