Reference third-party plug-ins into the sub-package, that is, how to put the plug-ins in the uni_modules folder into the sub-package

I searched a lot on the Internet, but none of them directly explained how to introduce the third-party plug-ins in node_modules into the sub-package. Why should I introduce them in the sub-package in the first place? The reason is that the mini program has a package size limit, which cannot exceed 2M. If it exceeds 2M, , you cannot publish or preview, so you have to put some plug-ins that are only used by one or some pages into subpackages.
 

The situation description and solutions are as follows:

1. When using the uniapp plug-in market, there are two ways to download plug-ins and introduce them into the project. One is to directly use HBuildex to import the plug-in, but this method will automatically put the plug-in into the uni_modules folder in the root directory. When packaging, it will automatically be included in the main package size. If the main package does not exceed 2M, this method completely fine. But if it exceeds 2M, we should consider subcontracting it.

2. Steps to put it into the subpackage: Click to download the plug-in ZIP. After clicking, a box will pop up, as shown below. In fact, you can also copy the plug-ins in the uni_modules folder into the subpackage, usually placed under the components folder in the subpackage.

Third, the reference method, if the plug-in is in the uni_modules folder, you can use it directly without any additional operations. But after putting it into the subpackage, the following code is required to specify the plug-in location.

        ①Use the code and use it normally, such as <qiun type="pie" :opts="opts" :chartData="chartData"/> ②Introduce the code and specify the
        plug-in location, such as import qiun from "@/pages_repair/components/ qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";  

        ③ Define the plug-in name, this is also the most important step. Defined in components in export default.

<template>
	<view>		
				<view style="margin-top: 150rpx;">
					<qiun
					  type="pie"
					  :opts="opts"
					  :chartData="chartData"
					/>
				</view>
	</view>
</template>
<script>
					
    import qiun from "@/pages_A/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";	

export default {
	
	components:{
		qiun,
	},
    //其他代码...
}

In fact, this operation   is explained in How to download and use components from the plug-in market - DCloud Q&A , but this was only discovered after I calmed down after having another headache. I really looked for him thousands of times in the crowd, but suddenly I looked back and found him in the dim light.

In fact, this operation is not difficult, and it is only convenient for those who urgently need to find the answer.