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

webpack插件

Usage no npm install needed!

<script type="module">
  import lxFrontendUniappCustomComponentRegisterPlugin from 'https://cdn.skypack.dev/@lx-frontend/uniapp-custom-component-register-plugin';
</script>

README

@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({
  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的前缀

特别注意

当该插件与@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,将所有的组件都打包到主包即可。