基于rollup的組件庫打包體積優(yōu)化
背景
前段時間對公司內(nèi)部的組件庫(類似element-ui)做了打包體積優(yōu)化斩祭，現(xiàn)在抽點(diǎn)時間記錄下。以前也做過構(gòu)建速度的優(yōu)化乡话，具體可以看組件庫的webpack構(gòu)建速度優(yōu)化
一些存在的問題
最開始打包是基于webpack的摧玫，在按需加載上存在的體積冗余會比較大，如：
-
webpack打包特有的模塊加載器函數(shù)蚊伞，這部分其實(shí)有些多余席赂，最好去掉 - 使用
babel轉(zhuǎn)碼時吮铭，babel帶來的helper函數(shù)全部是內(nèi)聯(lián)狀態(tài)时迫，需要轉(zhuǎn)成import或require來引入 - 使用
transform-rumtime對一些新特性添加polyfill，也是內(nèi)聯(lián)狀態(tài)谓晌，需要轉(zhuǎn)成import或require來引入 -
vue-loader帶來的額外代碼掠拳，如normalizeComponent，不做處理也是內(nèi)聯(lián) -
transform-vue-jsx帶來的額外函數(shù)引入纸肉，如mergeJSXProps溺欧，不做處理也是內(nèi)聯(lián)
以上幾個問題喊熟，如果只是一份代碼，那不會有太大問題姐刁，但是如果是按需加載芥牌，用戶一旦引入多個組件，以上的代碼就會出現(xiàn)多份聂使，帶來嚴(yán)重的影響
import { Button, Icon } from 'gs-ui'
以上代碼會轉(zhuǎn)成
import Button from 'gs-ui/lib/button.js'
import Icon from 'gs-ui/lib/icon.js'
這樣壁拉，就會出現(xiàn)多份相同的helper函數(shù)代碼，多份webpack的模塊加載器函數(shù)柏靶，而且還不好去重
尋找解決方案
討論過后主要有以下幾種選擇
采用后編譯
我們也認(rèn)同這種方案弃理，采用后編譯可以解決上面的各種問題，也有組件庫是這樣做的屎蜓，比如cube-ui痘昌，但是這樣有些不方便，因?yàn)橛脩粜枰O(shè)置各種alias炬转，還要保證好各種編譯環(huán)境辆苔，如jsx，而且未來可能會引入flow返吻，會更加不方便姑子，所以暫時不考慮
使用rollup打包，設(shè)置external(當(dāng)然webpack也可以)外聯(lián)helper函數(shù)
使用rollup打包测僵，可以直接解決問題1和問題4街佑，設(shè)置external可以解決transform-runtime等帶來的helper，這取決于相關(guān)插件實(shí)現(xiàn)時是不是通過import或require來添加helper的捍靠，如果是直接copy的話沐旨，那就還得另找辦法。最后決定就這種方案進(jìn)行嘗試
使用rollup對打包進(jìn)行重構(gòu)
使用rollup打包可能某些習(xí)慣和webpack有些出入榨婆，在這里很多事需要引入插件來完成磁携，比如引入node_modules中的模塊的話，需要加入rollup-plugin-node-resolve良风，加載commonjs模塊需要引入rollup-plugin-commonjs等等谊迄。另外還有些比較麻煩的，比如經(jīng)常會這樣寫
import xx from './xx-folder'
然后希望模塊打包器可以識別成
import xx from './xx-folder/index.js'
在rollup里還是需要用插件來完成這件事烟央，找到的插件都沒能滿足各種需求统诺，比如還需要對alias也能識別然后加上index.js，最后還是需要自己實(shí)現(xiàn)這個插件
基本的rollup配置應(yīng)該差不多是這樣的
{
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粮呢，因?yàn)榇虬鰜淼捏w積更小，功能完全滿足組件庫需要。因?yàn)闀嬖诟鞣N約定啄寡，比如組件肯定是存在render函數(shù)(不一定指的就是手寫render或jsx豪硅，只是不會有在js中使用template這種情況，這樣的好處是可以使用runtime-only的vue)挺物，組件肯定不存在style部分等等懒浮。
babel的配置上基本不會有改變，只是rollup-plugin-babel加上了runtimeHelpers识藤，用來開啟transform-runtme的嵌溢。可能你會覺得為了更精簡體積蹋岩，應(yīng)該去掉transform-runtime赖草，這點(diǎn)我持保留意見，這里使用transform-runtime的主要作用是為了接管babel-helpers剪个，因?yàn)檫@個babel-helpers無法被external秧骑。另外整個組件庫用到的babel-runtime其實(shí)也不多，主要是類似Object.assign這樣的函數(shù)扣囊，像這些函數(shù)乎折，使用的話還是需要加上transform-runtime的，或者需要自己實(shí)現(xiàn)侵歇，感覺沒什么必要骂澄。類似Array.prototype.includes這種無法被transform-runtime處理的還是會避免使用的
localResolve是自己實(shí)現(xiàn)的插件，用來添加index.js惕虑，并且能支持alias坟冲，
alias插件用來添加alias，并且需要設(shè)置后綴
replace插件用來替換一些環(huán)境變量溃蔫，比如開發(fā)環(huán)境會有錯誤提示健提，生成環(huán)境不會有，這里展示的是開發(fā)環(huán)境的配置伟叛。
配置external
所有優(yōu)化的關(guān)鍵在于external上私痹，除了最基本的vue需要external外，還有比如Button組件內(nèi)部依賴了Icon組件统刮，那是需要把Icon組件external的
// Button 組件
import Icom from 'components/icon'
其實(shí)就是所有的組件和共用的util函數(shù)都需要external紊遵，當(dāng)然這里本來就存在了，不是本次優(yōu)化要做的
主要要處理的是babel-helper等helper函數(shù)侥蒙，但是這里不能做到暗膜，我也沒有去了解babel是如何對這塊進(jìn)行處理的，最后還是需要transform-runtime來接管它辉哥。
rollup的external配置是支持函數(shù)類型的桦山，大概看tranform-runtime這個插件源碼可以找到addImport這些方法，可以知道polyfill是通過import來引入的醋旦，可以被external恒水，所以只需要在rollup配置的external添加上類似函數(shù)就可以達(dá)到我們想要的效果
{
external (id) {
// 對babel-runtime進(jìn)行external
return /^babel-runtime/.test(id) // 當(dāng)然別忘了還有很多 比如vue等等，這里就不寫了
}
}
這里就可以解決問題2和問題3
另外問題5饲齐，這個是如何來的呢钉凌，比如在寫jsx時，可能會這樣寫
// xx組件
export default {
render () {
return (
<div>
<ToolTip {...{props: tooltipProps}} />
{/* other */}
</div>
)
}
}
在某個組件中依賴了另一個組件捂人，考慮到擴(kuò)展性御雕，是支持對另一個組件進(jìn)行props設(shè)置的，所以經(jīng)常會這樣寫滥搭，在template中的話就類似于v-bind="tolltipProps"
這個時候transform-vue-jsx插件是會引入一個helper函數(shù)的酸纲，也就是babel-helper-vue-jsx-merge-props,大概看看transform-vue-jsx源碼也可以得知，這個helper也是import進(jìn)來的瑟匆，所以可以把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轉(zhuǎn)成render函數(shù)愁溜，babel插件做語法轉(zhuǎn)換疾嗅，因?yàn)?code>external的存在，保留了模塊關(guān)系冕象，整個代碼看起來很清晰代承，很舒服，不像webpack渐扮，都會添加一個模塊加載函數(shù)...
優(yōu)化后和優(yōu)化前的體積對比
下面的截圖是生產(chǎn)環(huán)境的版本论悴，也就是沒有了代碼提示，也已經(jīng)壓縮混淆后的代碼體積對比
左邊是優(yōu)化前墓律，右邊是優(yōu)化后
