基于rollup的组件库打包体积优化小结

基于rollup的组件库打包体积优化小结

背景

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

一些存在的问题

最雷开始打包是基于的，在按需加载上存在的来自体积冗余会比较大，如：

打包特360问答有的模块加载器函数基于rollup的组件库打包体积优化小结，这部分其实有些多余，最好去掉 使用b冲乐单abel转码时，babel带来的函数全部是内联状态，需要转成或来引入 使用-对一些新特性添加，也是内联状态，需要转成im架port或req自备演培形阿课穿角办笑uire来引入 vue-带来的额外代码，如，不做处理也是内联 -vue-jsx带来的额外函数引入，如部力ps，不做处理也是内联

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

{ Butt改爱on, Icon } from ‘g短营故s-ui’

以上代码会转成

im小有序略port from ‘gs-ui/lib/.js’ Icon from ‘gs-ui/lib/ic住照销转on.js’

这样，就会出现多还氧体份相同的函数身议呢矿这向密古你代码，多份的模块加载器函数，而且还不好去重

寻找解决方案

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

采用后编译

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

使用打包，设置(当然也可以)外联函数

使用打包，可以境洲求蛋治江界两久百直接解决问题1和问题英4，设置可以解决-等带来的，这取决于相关插件实现时是不是通过或来添加的，如果是直接copy的话，那就还得另找办法。最后决定就这种方案进行尝试

使用对打包进送行重构

使用打包可能某些习惯和web环吗边川谈pack有些出入，在这里很多事需要引入插件来完成，比如引入中的模块的话，需要加入–node-，加载模块需要引入–等等。另外还有些比较麻烦的，比如经常会这样写

xx from ‘./xx-‘

然后希望模块打包器可以识别成

xx from ‘./xx-/index.js’

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

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

{ : { : ‘es’, // file: xx, // paths: }, input: ‘xxx’, :

vue({: true,: {:

/@/, new (”)

/:/, new (”)

,: true,: true} }), babel({…({: false,ugin: false}),: ‘/**’,: true }), ({: path.(, ‘../’) }), alias({: path.(, ‘../’),:

‘.js’, ‘.vue’

}), ({‘.env.’: JSON.(”) })

, // }

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

babel的配置上基本不会有改变，只是–babel加上了，用来开启-的。可能你会觉得为了更精简体积，应该去掉-，这点我持保留意见，这里使用-的主要作用是为了接管babel-，因为这个babel-无法被。另外整个组件库用到的babel-其实也不多，主要是类似.这样的函数，像这些函数，使用的话还是需要加上-的，或者需要自己实现，感觉没什么必要。类似Array..这种无法被-处理的还是会避免使用的

是自己实现的插件，用来添加index.js基于rollup的组件库打包体积优化小结，并且能支持alias，

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

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

配置

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

// 组件 Icom from ‘/icon’

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

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

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

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

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

另外问题5，这个是如何来的呢vue 组件库 打包，比如在写jsx时，可能会这样写

// xx组件 { () { ( ) } }

在某个组件中依赖了另一个组件，考虑到扩展性，是支持对另一个组件进行props设置的，所以经常会这样写，在中的话就类似于v-bind=””

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

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

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

// Alert组件 from ‘babel-//’; Icon from ‘gs-ui/lib/icon.js’; var Alert = { : () { var ;var _vm = this;var _h = _vm.$;var _c = _vm._self._c || _h; _c(”, { attrs: { “name”: “gs-zoom-in-top” } },

_***.show ? _c(‘div’, { class: ( = { ‘gs-alert’: true }, (, ‘gs-alert-‘ + _vm.type, !!_vm.type), (, ‘has-desc’, _vm.desc || _vm.$slots.desc), ) },

_***. ? _c(‘div’, { : “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’, { : “gs-alert-” },

_vm.title || _vm.$slots. ? _c(‘div’, { : “gs-alert-title” },

_vm._t(“”,

_vm._v(_vm._s(_vm.title))

, 2) : _vm._e(), _vm._v(” “), _vm.desc || _vm.$slots.desc ? _c(‘div’, { : “gs-alert-desc” },

_vm._t(“desc”,

_vm._v(_vm._s(_vm.desc))

, 2) : _vm._e(), _vm._v(” “), _vm. ? _c(‘div’, { : “gs-alert-close”, on: { “click”: _vm.close } },

_vm._t(“close”,

_vm._v(” ” + _vm._s(_vm.) + ” “), !_vm. ? _c(‘gs-icon’, { attrs: { “name”: “close” } }) : _vm._e()

, 2) : _vm._e()

) : _vm._e()

); }, : , name: ”, : ({}, ***.name, Icon), // props // data// }; /* next */ Alert. = (Vue) { (***.name, Alert); }; Alert;

vue插件把vue组件中的转成函数，babel插件做语法转换，因为的存在，保留了模块关系，整个代码看起来很清晰，很舒服，不像，都会添加一个模块加载函数…

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

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

左边是优化前，右边是优化后

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