前端代码打包优化 （一）

前端资源打包在每个项目中都会有涉及，从如何优化构建速度和优化构建输出代码来说明一些方法。

1.1 本地构建或者服务端构建

1.1.1 本地构建

开发完后本地构建，然后通过push到cnd同步资源。可能是传统大家喜欢做的思路，没毛病，也挺好用的。

不足：加重了仓库的体积，对于仓库中的语义化的npm包，本地构建不能实时享受到包的更新。

优点： 适合于多人项目合作初期，或者依赖的一个三方包也处于一个不断迭代的过程，每个人开发的过程中仅仅打包自己的页面，互相不干扰

1.1.2 服务端构建

服务端构建，大致就是当资源push的时候，会在一台构建机器上面跑类似ci的服务，同时也会有打包的服务

优缺点基本就是本地的相反，但是还是比较推荐这样的方案

1.2 如何来优化

1.2.1 配置差异化

粗暴点其实大家可能希望这个配置可以自动化生成，而且可以仅有一份来做，思路是没错，但是其实应该做一些区分

其实比较合理的方式应该是用环境变量来区分进行不同环境下不同的配置，ps：设置环境变量为了在window兼容，可以使用cross-env 来设置

以上的对比没有进行测试，感兴趣的同学可以试试看，在老的基础上修改会有多少的优化。

总结起来就是本地开发只求速度快，能少处理一点是一点

1.2.2 常见方式

可以在社区中看到很多相关类似的文章来做webpack的优化，各种各样的提速，可能都知道，但是懒得做，但其实一旦完成后，带来的受益是巨大的。

externals

这可能是最暴力最提速的方法之一，把其中的一些库从中忽略掉，如果extern react了，需要注意的是最好把相关的一些react-addons-transition-group也给extern掉，否则有可能会出现依然打入多份react的问题，因为react-addons-transition-group这样的包里面代码是类似如下方式，externals并不能排除

module.exports = require('react/lib/ReactTransitionGroup');

Dll

将一些可预见性的库从中抽离，预打包，可以极大的提速，当时还是有蛮多需要注意的，比如同样的包最好全局只有一份，预打包后不能享受到语义化版本的资源跟新，需要结合实际问题来看是否需要。

HappyPack

常用套路加速

const os = require('os');HappyPack.ThreadPool({size: os.cpus().length })

一些配置

设置一些alias，同时可以适当设置一些loaders中的exclude等

设置css-loader版本号

提速特别明显

"css-loader": "^0.14.5",

相关Issue

替换scss-loader 为fast-sass-loader

相比起来比scss-loader速度更快

不用webpack自带的uglfiyJS

用自带的uglfiyJS来做压缩速度比较慢，这边有俩思路，但原理应该是一样的

1. webpack-uglify-parallel
2. 造个新轮子多核并行去压缩js和css

这个方案优化一般来说可以提速一半左右

js和scss的分离

这个可以优化本地开发过程中的rebuild速度，尽量让scss文件和js文件分离，如果使用了一些ui库，可以引用UI库的css文件，而不是scss文件，省去每次的scss build过程

1.3 其他

1. 对于打包webpack可能是一个功能大而全的工具，除此之外还有很多类似于rollup或者是browserify，要看具体场景来使用，杀鸡可能选个更合适的刀会更好，不要盲目选择都是用一把刀。后续待尝试后详细再补相关的一些其他打包方案。
2. 优化永无止境