炸金花

炸金花

  • 中文
  • ENGLISH
前端代码打包优化
2018/03/08

本文作者:天尹

前端资源打包在每个项目中都会有涉及,每位开发者都希望打包是用最少的时间构建出最小的代码,这不仅能提高团队中的效率,也能提高页面的访问性能,以下会从如何优化构建速度和优化构建输出代码来说明一些方法。
图片来自webpacklog

1. 速度优化

日常开发打包配置大家都是习惯用脚手架等的默认配置,没问题,没毛病,跑的好好的,就没这么在意。对于一些强迫症的患者,还是会有点不爽的, 比如速度,比如最终打包出来的资源大小等等㍚文BLOG
  • 关于我们ABOUT US
  • 加入我们JOBS
  • 前端代码打包优化
    2018/03/08

    本文作者:天尹

    前端资源打包在每个项目中都会有涉及,每位开发者都希望打包是用最少的时间构建出最小的代码,这不仅能提高团队中的效率,也能提高页面的访问性能,以下会从如何优化构建速度和优化构建输出代码来说明一些方法。
    图片来自webpacklog

    1. 速度优化

    日常开发打包配置大家都是习惯用脚手架等的默认配置,没问题,没毛病,跑的好好的,就没这么在意。对于一些强迫症的患者,还是会有点不爽的, 比如速度,比如最终打包出来的资源大小等等。

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

    1.1.1 本地构建

    开发完后本地构建,然后通过push到cnd同步资源。可能是传统大家喜欢做的思路,没毛病,也挺好用的。
    不足点:加重了仓库的体积,对于仓库中的语义化的npm包,本地构建不能实时享受到包的更新。
    优点: 适合于多人项目合作初期,或者依赖的一个三方包也处于一个不断迭代的过程,每个人开发的过程中仅仅打包自己的页面,互相不干扰

    1.1.2 服务端构建

    服务端构建,大致就是当资源push的时候,会在一台构建机器上面跑类似ci的服务,同时也会有打包的服务
    优缺点基本就是本地的相反,但是还是比较推荐这样的方案

    1.2 如何来优化

    1.2.1 配置差异化

    粗暴点其实大家可能希望这个配置可以自动化生成,而且可以仅有一份来做,思路是没错,但是其实应该做一些区分
    功能
    本地开发
    线上发布
    压缩代码
    需要
    babel-polyfill
    一般不需要
    看业务需求
    分离样式
    需要
    删除console.log
    需要
    css Prefix
    需要
    OccurrenceOrderPlugin
    需要
    DedupePlugin
    需要
    Babel present转码
    需要
    其实比较合理的方式应该是用环境变量来区分进行不同环境下不同的配置,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",
    替换scss-loader 为fast-sass-loader
    相比起来比scss-loader速度更快
    不用webpack自带的uglfiyJS
    用自带的uglfiyJS来做压缩速度比较慢,这边有俩思路,但原理应该是一样的
    1. 造个新轮子多核并行去压缩js和css
    这个方案优化一般来说可以提速一半左右
    js和scss的分离
    这个可以优化本地开发过程中的rebuild速度,尽量让scss文件和js文件分离,如果使用了一些ui库,可以引用UI库的css文件,而不是scss文件,省去每次的scss build过程

    1.3 其他

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

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

    1.1.1 本地构建

    开发完后本地构建,然后通过push到cnd同步资源。可能是传统大家喜欢做的思路,没毛病,也挺好用的。
    不足点:加重了仓库的体积,对于仓库中的语义化的npm包,本地构建不能实时享受到包的更新。
    优点: 适合于多人项目合作初期,或者依赖的一个三方包也处于一个不断迭代的过程,每个人开发的过程中仅仅打包自己的页面,互相不干扰

    1.1.2 服务端构建

    服务端构建,大致就是当资源push的时候,会在一台构建机器上面跑类似ci的服务,同时也会有打包的服务
    优缺点基本就是本地的相反,但是还是比较推荐这样的方案

    1.2 如何来优化

    1.2.1 配置差异化

    粗暴点其实大家可能希望这个配置可以自动化生成,而且可以仅有一份来做,思路是没错,但是其实应该做一些区分
    功能
    本地开发
    线上发布
    压缩代码
    需要
    babel-polyfill
    一般不需要
    看业务需求
    分离样式
    需要
    删除console.log
    需要
    css Prefix
    需要
    OccurrenceOrderPlugin
    需要
    DedupePlugin
    需要
    Babel present转码
    需要
    其实比较合理的方式应该是用环境变量来区分进行不同环境下不同的配置,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 })
    一些配置