@lx-frontend/uniapp-custom-component-register-plugin

webpack插件

Install

npm install --save-dev @lx-frontend/uniapp-custom-component-register-plugin

Usage

const UniappCustomComponentScatterPlugin = require('@lx-frontend/uniapp-custom-component-register-plugin')

new UniappCustomComponentScatterPlugin({
  showDetail: false,
  allPackIntoMain: false,
  pagesJsonPath: '/src/pages.json',
  sourcePath: '/node_modules/@lx-frontend/wxapp-lui/dist',
  prefix: 'x-'
})

配置说明

|option|default|说明| |----|----|----| |allPackIntoMain|true|true表示所有的小程序组件都打包到主包中，false表示将主包没有使用的组件分散到各个分包中去。可以通过分析分散和未分散对主包大小的影响决定是否分散。| |pagesJsonPath|--|pages.json文件路径（相对于项目根目录）| |sourcePath|--|小程序组件目录，该路径和pages.json中usingComponents中小程序组件注册的路径合并后就是组件的位置| |prefix|--|组件在标签中使用时，使用的前缀，比如'x-'是wxapp-lui的前缀| |showDetail|false|是否在终端打印组件移动的详细信息|

特别注意

当该插件与@lx-frontend/uniapp-global-components-register-plugin（下称global component plugin）一起使用时，请确保该插件在global component plugin后面注册。因为global component plugin会修改输出文件的内容及位置，而该插件会分析最终打包文件的内容。

该插件解决什么问题？

当前uniapp项目中，外部小程序组件通过复制的方式，在打包开始前，将组件复制到/static目录下。 该方式存在两个问题：

1. /static目录下的所有文件将被打包进主包，无论主包页面是否有引用。增加了主包体积。
2. 打包前的复制动作实际上也是打包的一个步骤，但是却不在webpack的管理范围中，破坏了打包过程的完成性。

该插件通过分析打包最终生成的wxml代码，以及小程序组件之间的相互引用，确定哪些组件需要放在主包中，哪些可以放在分包中，然后通过修改页面对组件的引用位置，并添加compilation.assets的方式，一方面将小程序组件分散到各个分包中，一方面，将组件的复制过程纳入webpack的管理范围。

优点

减小了主包体积，外部小程序组件集中注册，并剔除了注册了但未使用的组件。

缺点

因为小程序组件之间的相互引用使用的是相对位置，所以要保证组价之间的相对位置不能改变，所以，在有的分包中，虽然页面没有直接引用某个组件，但是因为其他组件引用了该组件，该组件也会被打包进分包，这就造成了包和包之间有组件冗余。 对于这个问题，如果组件分散对于减小主包体积作用不明显，则完全可以设置插件的配置allPackIntoMain为true，将所有的组件都打包到主包即可。