基于Rollup的组件库打包体积优化小结
基于Rollup的组件库打包体积优化小结主要介绍了基于Rollup的组件库打包体积优化小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。
背景
前段时间对公司内部的组件库（类似Element-UI）做了打包体积优化，现在抽点时间记录下。以前也做过构建速度的优化，具体可以看组件库的Webpack构建速度优化。
问题
以前打包是基于Webpack的，在按需加载上存在的体积冗余会比较大，如：
1. Webpack打包特有的模块加载器函数，这部分其实有些多余，最好去掉
2. 使用Babel转码时，Babel带来的helper函数全部是内联状态，需要转成import或require来引入
3. 使用transform-runtime对一些新特性添加polyfill，也是内联状态，需要转成import或require来引入
4. Vue-loader带来的额外代码，如normalizeComponent，不做处理也是内联
这些问题，如果只是一份代码，那不会有太大问题，但是如果是按需加载，用户一旦引入多个组件，以上的代码就会出现多份，带来严重的影响。
解决方案
讨论过后主要有以下几种选择：
1. 采用后编译我们也认同这种方案，采用后编译可以解决上面的各种问题，也有组件库是这样做的，比如Cube-UI，但是这样有些不方便，因为用户需要设置各种alias，还要保证好各种编译环境，如JSX，而且未来可能会引入Flow，会更加不方便。
2. 使用Rollup打包，设置external（当然Webpack也可以）外联helper函数使用Rollup打包，可以直接解决问题1和问题4，设置external可以解决transform-runtime等带来的helper，这取决于相关插件实现时是不是通过import或require来添加helper的，如果是直接copy的话，那就还得另找办法。
Rollup配置
最后决定使用Rollup对打包进行重构使用Rollup打包可能某些习惯和Webpack有些出入，在这里很多事需要引入插件来完成，比如引入node_modules中的模块的话，需要加入rollup-plugin-node-resolve，加载commonjs模块需要引入rollup-plugin-commonjs等等。
基本的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']
})
]
}
```
基于Rollup的组件库打包体积优化小结可以解决以前基于Webpack的打包体积冗余问题，并且可以更好地优化组件库的打包体积。
