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

　　

　　

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

　　

　　

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

　　
    　　<李> <代码> webpack> 　　<李>使用<代码>巴别塔> 巴别塔> 助手> 进口或<代码> 需要来引入李 　　<李>使用<代码> transform-rumtime> polyfill> 进口或<代码> 需要来引入李 　　<李> <代码> vue-loader> normalizeComponent> 　　<李> <代码> transform-vue-jsx> mergeJSXProps> 　　
　　

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

　　 　　 　　从“gs-ui”进口{按钮,图标} 　　 　　

以上代码会转成

　　 　　 　　从“gs-ui/lib/button.js”导入按钮 　　从“gs-ui导入图标/lib/icon.js ' 　　 　　

这样,就会出现多份相同的辅助<代码> 函数代码,多份<代码> webpack> 　　

　　

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

　　
采用后编译 　　

我们也认同这种方案,采用后编译可以解决上面的各种问题,也有组件库是这样做的,比如cube-ui,但是这样有些不方便,因为用户需要设置各种<代码>别名> jsx> 流动,会更加不方便,所以暂时不考虑

　　
使用汇总打包,设置的外部(当然webpack也可以)外联辅助函数 　　

使用<代码>汇总> 可以解决<代码> transform-runtime> 助手> 或<代码> 需要来添加辅助<代码> 的,如果是直接<代码> 　　

　　

使用<代码>汇总> webpack> node_modules> rollup-plugin-node-resolve> 模块需要引入<代码> rollup-plugin-commonjs> 　　 　　 　　从“进口xx。/xx-folder ' 　　 　　

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

　　 　　 　　从“进口xx。/xx-folder index.js” 　　 　　

在<代码>汇总> 别名> index.js> 　　

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

　　 　　 　　{ 　　输出:{ 　　格式:“西文”,//文件:xx,//路径: 　　}， 　　输入:“xxx”, 　　插件:[ 　　vue ({ 　　compileTemplate:没错, 　　htmlMinifier: { 　　customAttrSurround:[[//@,新的正则表达式(“)],[/:/,新的正则表达式(“)]], 　　collapseWhitespace:没错, 　　removeComments:真 　　} 　　}), 　　巴别塔({ 　　…babelrc ({ 　　addModuleOptions:假的, 　　addExternalHelpersPlugin:假 　　}), 　　排除:“node_modules/* *”, 　　runtimeHelpers:真 　　}), 　　localResolve ({ 　　组件:路径。解决(__dirname“. ./组件”) 　　}), 　　别名({ 　　组件:路径。解决(__dirname“. ./组件”), 　　解决:['。js”、“.vue '] 　　}), 　　替换({ 　　“process.env。NODE_ENV”: JSON.stringify(的发展) 　　}） 　　]，//外部 　　} 　　 　　

这里采用的<代码> rollup-plugin-vue> v3.0.0> v4> 基于汇总的组件库打包体积优化小结