2.1.2 • Published 1 year ago
@lx-frontend/uniapp-custom-component-register-plugin v2.1.2
@lx-frontend/uniapp-custom-component-register-plugin
webpack插件
Install
npm install --save-dev @lx-frontend/uniapp-custom-component-register-pluginUsage
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，将所有的组件都打包到主包即可。