足球野小子:基于rollup的组件库打包体积优化小结

足球竞彩网 www.2ts2.com.cn  更新时间:2018年06月18日 09:37:34   作者:huacode   我要评论

这篇文章主要介绍了基于rollup的组件库打包体积优化小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

背景

前段时间对公司内部的组件库(类似element-ui)做了打包体积优化,现在抽点时间记录下。以前也做过构建速度的优化,具体可以看组件库的webpack构建速度优化

一些存在的问题

最开始打包是基于webpack的,在按需加载上存在的体积冗余会比较大,如:

  1. webpack打包特有的??榧釉仄骱?,这部分其实有些多余,最好去掉
  2. 使用babel转码时,babel带来的helper函数全部是内联状态,需要转成importrequire来引入
  3. 使用transform-rumtime对一些新特性添加polyfill,也是内联状态,需要转成importrequire来引入
  4. vue-loader带来的额外代码,如normalizeComponent,不做处理也是内联
  5. transform-vue-jsx带来的额外函数引入,如mergeJSXProps,不做处理也是内联

以上几个问题,如果只是一份代码,那不会有太大问题,但是如果是按需加载,用户一旦引入多个组件,以上的代码就会出现多份,带来严重的影响

import { Button, Icon } from 'gs-ui'

以上代码会转成

import Button from 'gs-ui/lib/button.js'
import Icon from 'gs-ui/lib/icon.js'

这样,就会出现多份相同的helper函数代码,多份webpack的??榧釉仄骱?,而且还不好去重

寻找解决方案

讨论过后主要有以下几种选择

采用后编译

我们也认同这种方案,采用后编译可以解决上面的各种问题,也有组件库是这样做的,比如cube-ui,但是这样有些不方便,因为用户需要设置各种alias,还要保证好各种编译环境,如jsx,而且未来可能会引入flow,会更加不方便,所以暂时不考虑

使用rollup打包,设置external(当然webpack也可以)外联helper函数

使用rollup打包,可以直接解决问题1和问题4,设置external可以解决transform-runtime等带来的helper,这取决于相关插件实现时是不是通过importrequire来添加helper的,如果是直接copy的话,那就还得另找办法。最后决定就这种方案进行尝试

使用rollup对打包进行重构

使用rollup打包可能某些习惯和webpack有些出入,在这里很多事需要引入插件来完成,比如引入node_modules中的??榈幕?,需要加入rollup-plugin-node-resolve,加载commonjs??樾枰?code>rollup-plugin-commonjs等等。另外还有些比较麻烦的,比如经?;嵴庋?/p>

import xx from './xx-folder'

然后希望??榇虬骺梢允侗鸪?/p>

import xx from './xx-folder/index.js'

rollup里还是需要用插件来完成这件事,找到的插件都没能满足各种需求,比如还需要对alias也能识别然后加上index.js,最后还是需要自己实现这个插件

基本的rollup配置应该差不多是这样的

{
 output: {
  format: 'es',
  // file: xx,
  // paths: 
 },
 input: 'xxx',
 plugins: [
  vue({
   compileTemplate: true,
   htmlMinifier: {
    customAttrSurround: [[/@/, new RegExp('')], [/:/, new RegExp('')]],
    collapseWhitespace: true,
    removeComments: true
   }
  }),
  babel({
   ...babelrc({
    addModuleOptions: false,
    addExternalHelpersPlugin: false
   }),
   exclude: 'node_modules/**',
   runtimeHelpers: true
  }),
  localResolve({
   components: path.resolve(__dirname, '../components')
  }),
  alias({
   components: path.resolve(__dirname, '../components'),
   resolve: ['.js', '.vue']
  }),
  replace({
   'process.env.NODE_ENV': JSON.stringify('development')
  })
 ],
 // external
}

这里采用的rollup-plugin-vue的版本是v3.0.0,不采用v4,因为打包出来的体积更小,功能完全满足组件库需要。因为会存在各种约定,比如组件肯定是存在render函数(不一定指的就是手写renderjsx,只是不会有在js中使用template这种情况,这样的好处是可以使用runtime-onlyvue),组件肯定不存在style部分等等。

babel的配置上基本不会有改变,只是rollup-plugin-babel加上了runtimeHelpers,用来开启transform-runtme的??赡苣慊峋醯梦烁蛱寤?,应该去掉transform-runtime,这点我持保留意见,这里使用transform-runtime的主要作用是为了接管babel-helpers,因为这个babel-helpers无法被external。另外整个组件库用到的babel-runtime其实也不多,主要是类似Object.assign这样的函数,像这些函数,使用的话还是需要加上transform-runtime的,或者需要自己实现,感觉没什么必要。类似Array.prototype.includes这种无法被transform-runtime处理的还是会避免使用的

localResolve是自己实现的插件,用来添加index.js,并且能支持alias,

alias插件用来添加alias,并且需要设置后缀

replace插件用来替换一些环境变量,比如开发环境会有错误提示,生成环境不会有,这里展示的是开发环境的配置。

配置external

所有优化的关键在于external上,除了最基本的vue需要external外,还有比如Button组件内部依赖了Icon组件,那是需要把Icon组件external

// Button 组件
import Icom from 'components/icon'

其实就是所有的组件和共用的util函数都需要external,当然这里本来就存在了,不是本次优化要做的

主要要处理的是babel-helperhelper函数,但是这里不能做到,我也没有去了解babel是如何对这块进行处理的,最后还是需要transform-runtime来接管它。

rollupexternal配置是支持函数类型的,大概看tranform-runtime这个插件源码可以找到addImport这些方法,可以知道polyfill是通过import来引入的,可以被external,所以只需要在rollup配置的external添加上类似函数就可以达到我们想要的效果

{
 external (id) {
  // 对babel-runtime进行external
  return /^babel-runtime/.test(id) // 当然别忘了还有很多 比如vue等等,这里就不写了
 }
}

这里就可以解决问题2和问题3

另外问题5,这个是如何来的呢,比如在写jsx时,可能会这样写

// xx组件
export default {
 render () {
  return (
   <div>
    <ToolTip {...{props: tooltipProps}} />
    {/* other */}
   </div>
  )
 }
}

在某个组件中依赖了另一个组件,考虑到扩展性,是支持对另一个组件进行props设置的,所以经?;嵴庋?,在template中的话就类似于v-bind="tolltipProps"

这个时候transform-vue-jsx插件是会引入一个helper函数的,也就是babel-helper-vue-jsx-merge-props,大概看看transform-vue-jsx源码也可以得知,这个helper也是import进来的,所以可以把external改成

{
 external (id) {
  return /^babel/.test(id)
 }
}

这样就可以做到对所有helper都使用import的形式来引入,而且使用rollup打包后的代码更可读,大概长这样

// Alert组件
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import Icon from 'gs-ui/lib/icon.js';

var Alert = { render: function render() {
  var _class;

  var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('transition', { attrs: { "name": "gs-zoom-in-top" } }, [_vm.show ? _c('div', { class: (_class = { 'gs-alert': true }, _defineProperty(_class, 'gs-alert-' + _vm.type, !!_vm.type), _defineProperty(_class, 'has-desc', _vm.desc || _vm.$slots.desc), _class) }, [_vm.showIcon ? _c('div', { staticClass: "gs-alert-icon", class: { "gs-alert-icon-top": !!_vm.desc } }, [_vm._t("icon", [_c('gs-icon', { attrs: { "name": _vm.icon } })])], 2) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "gs-alert-content" }, [_vm.title || _vm.$slots.default ? _c('div', { staticClass: "gs-alert-title" }, [_vm._t("default", [_vm._v(_vm._s(_vm.title))])], 2) : _vm._e(), _vm._v(" "), _vm.desc || _vm.$slots.desc ? _c('div', { staticClass: "gs-alert-desc" }, [_vm._t("desc", [_vm._v(_vm._s(_vm.desc))])], 2) : _vm._e(), _vm._v(" "), _vm.closable ? _c('div', { staticClass: "gs-alert-close", on: { "click": _vm.close } }, [_vm._t("close", [_vm._v(" " + _vm._s(_vm.closeText) + " "), !_vm.closeText ? _c('gs-icon', { attrs: { "name": "close" } }) : _vm._e()])], 2) : _vm._e()])]) : _vm._e()]);
 }, staticRenderFns: [],
 name: 'GsAlert',
 components: _defineProperty({}, Icon.name, Icon),
 // props
 // data

 // methods
};

/* istanbul ignore next */
Alert.install = function (Vue) {
 Vue.component(Alert.name, Alert);
};

export default Alert;

vue插件把vue组件中的template转成render函数,babel插件做语法转换,因为external的存在,保留了??楣叵?,整个代码看起来很清晰,很舒服,不像webpack,都会添加一个??榧釉睾?..

优化后和优化前的体积对比

下面的截图是生产环境的版本,也就是没有了代码提示,也已经压缩混淆后的代码体积对比
左边是优化前,右边是优化后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 常用的JavaScript模板引擎介绍

    常用的JavaScript模板引擎介绍

    这篇文章主要介绍了常用的JavaScript模板引擎介绍,本文介绍了8款常用JavaScript 模板引擎,着重讲解了artTemplate模板引擎,需要的朋友可以参考下
    2015-02-02
  • JavaScript访问字符串中单个字符的两种方法

    JavaScript访问字符串中单个字符的两种方法

    这篇文章主要介绍了JavaScript访问字符串中单个字符的两种方法,本文分别讲解了索引方式访问单个字符串、charAt()函数访问单个字符以及两种方式的不同,需要的朋友可以参考下
    2015-07-07
  • 原生JS实现的轮播图功能详解

    原生JS实现的轮播图功能详解

    这篇文章主要介绍了原生JS实现的轮播图功能,结合实例形式分析了javascript实现轮播图的原理、操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • 基于Turn.js 实现翻书效果实例解析

    基于Turn.js 实现翻书效果实例解析

    最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,问题顺利解决,下面小编把学习心得分享,感兴趣的朋友可以参考下
    2016-06-06
  • Bootstrap导航条学习使用(二)

    Bootstrap导航条学习使用(二)

    这篇文章主要为大家详细介绍了Bootstrap导航条的使用方法第二篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • BootStrap实现手机端轮播图左右滑动事件

    BootStrap实现手机端轮播图左右滑动事件

    用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件、框架。但是都不能和bootstrap良好的结合。经过一番折腾终于找到了解决方法,下面小编通过本文给大家简单介绍下
    2016-10-10
  • 让alert不出现弹窗的两种方法

    让alert不出现弹窗的两种方法

    这篇文章主要介绍了让alert不出现弹窗的两种方法,需要的朋友可以参考下
    2014-05-05
  • Swiper实现轮播图效果

    Swiper实现轮播图效果

    这篇文章主要为大家详细介绍了Swiper实现轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • js, jQuery实现全选、反选功能

    js, jQuery实现全选、反选功能

    本文主要介绍了js, jQuery实现全选、反选功能的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js文本框输入内容智能提示效果

    js文本框输入内容智能提示效果

    这篇文章主要介绍了js文本框输入内容智能提示效果,非常简单实用,需要的朋友可以参考下
    2015-12-12

最新评论

  • 浙江大学杭州国际城市学研究中心博士后研究基地2018年上半年招聘启事 2019-04-20
  • 引爆全联盟!勇士老板宣布球队计划 完全不给活路 2019-04-16
  • 特金会:无非就是“一大”和“一多”!—吴建勋的博客—强国博客—人民网 2019-04-13
  • 贵州瓮安:荒坡变花海 美景引客来 2019-04-12
  • 国家审计促发展 促改革 促安全 促绩效系列访谈 2019-04-12
  • 中国是亚洲和平的基石 2019-04-05
  • 足球运动也是需要不断创新的,不能老是跟着别人的套路走!同样需要较高的综合素质,不能从小就走上专业化的道路。不然就只能是四肢发达头脑简单,就会陷入机械足球的泥潭! 2019-04-05
  • 你这帖子怎么像四两为你代笔的?[微笑] 2019-04-02
  • 郑板桥的“六分半书” 2019-04-02
  • 重庆私藏的绝美古镇 悠闲不打挤 2019-04-01
  • 香江直通车之专访香港义工联盟常务副主席马浩文 2019-03-31
  • 云南大学:努力开创边疆民族地区建设一流大学之路 2019-03-26
  • 女性之声——全国妇联 2019-03-19
  • 全国省级新税务机构统一挂牌 2019-03-05
  • 一根充电线从天而降 楼下玛莎拉蒂被砸出两个凹陷 2019-03-01
  • 346| 93| 504| 298| 424| 638| 951| 470| 154| 924|