专栏首页nginx遇上redis前端代码打包优化 (一)

前端代码打包优化 (一)

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

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",

相关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. 优化永无止境

本文分享自微信公众号 - nginx遇上redis(GGame_over_the_world)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mybatis中数据库的增删改查和动态Sql

    以下例子的配置文件中出现了一些mybatis特有的动态Sql的标签,比如trim,foreach或set标签。动态Sql是为了应对更多的情况。trim标签的功能...

    马克java社区
  • 深入浅出Java中的clone克隆方法,写得太棒了!

    clone 顾名思义就是 复制 , 在Java语言中, clone方法被对象调用,所以会复制对象。所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空...

    Java技术江湖
  • 用 preload 预加载页面资源

    本文主要介绍preload的使用,以及与prefetch的区别。然后会聊聊浏览器的加载优先级。

    ConardLi
  • Echarts多Y轴探索

    ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fi...

    孟君
  • python笔记42-http请求命令行工具(httpie)

    通常我们需要快速的测试某个接口通不通,一般linux上用curl去发http请求,但是这个命令行工具语法有点复杂了,不够直观。 python有一个给人类使用的r...

    上海-悠悠
  • java后端学习路线建议

    你是想要进大厂,还是想进小公司呢? 对于一个普通本科生,很可能真正步入学习的时间不多。并且能够掌握的知识的广度和深度也是有限度的,还要考虑学习环境的影响。要慎重...

    用户4372098
  • Java String 对象,你真的了解了吗?

    String对象是 Java 中使用最频繁的对象之一,所以 Java 公司也在不断的对String对象的实现进行优化,以便提升String对象的性能,看下面这张...

    平头哥的技术博文
  • 微软研究院推出支持PowerBI的作图大杀器

    微软在Ignite2018关于PowerBI的演示中使用了一个很猛的自定义可视化,先来看看效果:

    BI佐罗
  • 不仅会用@Async,我把源码也梳理了一遍(上)

    说起异步化,很多人会想起异步线程、消息队列等,消息队列不是文章的主题,今天我们来聊聊spring对异步化的支持@EnableAsync&@Async。

    java思维导图
  • ASP.NET Core 2.2 : 二十三. 深入聊一聊配置的内部处理机制

    上一章介绍了配置的多种数据源被注册、加载和获取的过程,本节看一下这个过程系统是如何实现的。(ASP.NET Core 系列目录)

    FlyLolo

扫码关注云+社区

领取腾讯云代金券