Solve the problem that when using uniapp to develop WeChat applet, the main package is too large and vendor.js is too large and cannot be packaged.

When developing small programs in uniapp, I believe many developers have encountered the problem that the size of the code is too large to be packaged. At this time, it is necessary to optimize the size of the small program package. Let me share my solution ideas below. Hope it can give you some help.

Method 1: Online pictures

The reason why the mini program is large is because if the image resources in the static directory are too large, we can upload the static images to the image server, and the mini program uses links to download and use the images.

Use online addresses for static images and do not put them in the project, except for the icon of navBar, because that can only use local resources, which is relatively small.

1. Upload image resources to the image server

Upload the cut pictures to the picture server,
such as https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2. Handle image references in JS and vue

2.1. Define JS global variables

Define js global variables on the main.js page

Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/'; 
Vue.prototype.getStaticFilePath = function (url) {
    return Vue.prototype.staticDir + url;  
}

2.2. Replace the image address in vue

The image address we quoted before was as follows:

<view class="demo">
    <image src="/static/images/1.png"></image>
</view>

Now we can modify src to look like this:

<view class="demo">
    <image :src="getStaticFilePath('/images/1.png')"></image>
</view>

3. Process image references in css

There is a special file uni.scss in the root directory of uniapp. You can use the style variables here in the scss code without importing this file. The uni-app compiler specially processes this uni.scss in the webpack configuration, so that each scss file is injected into this uni.scss to achieve a globally available effect. We put the static directory variable of scss here so that it can be used globally.

3.1. Define scss global variables

Add at the end of uni.scss:

// 背景图片路径
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';

3.2. Rename the css file to scss file

Rename the original css file to a scss file, and modify the reference in vue as follows. Added lang="scss"

<style scoped lang="scss">

</style>

3.3. Replace the image address in css

In the past, the background image address in CSS was as follows:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url(/static/imags/1.png);
    background-size: cover;
}

Now we can modify the url to look like this:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url($custom-bg-img-url+'/images/1.png');
    background-size: cover;
}

Method 2: Subpackage loading

In addition to TabBa's pages, other pages are subcontracted to ensure the size of the main package, because those static js and components will also be put into the main package after compilation. The subcontracting method is explained in detail on the official website.

Currently, the mini program sub-package size has the following restrictions:

The size of all sub-packages of the entire mini program cannot exceed 20M.
The size of a single sub-package/main package cannot exceed 2M.

Subcontracting mini programs can optimize the download time for the first launch of the mini program, and enable better decoupling and collaboration when multiple teams develop together.

For specific usage, please refer to:

The official website introduces
the use of subcontracting,
independent subcontracting,
subcontracting, pre-downloading,
subcontracting and asynchronousization

Method 3: Dependency separation

After using sub-packaging, you will find a strange problem. The components and js files of the sub-package will be packaged into the vendor.js file of the main package, which causes vendor.js to be too large.

1. Check manifest.json. In the source code view under this file, there is an optimization in the mp-weixin node.

The subpackages node under optimization is used to control WeChat subcontracting. This node needs to be set to true.

"optimization" : {
    "subpackages" : true
}

Insert image description here

2. After configuring and re-running, you will find that the sub-packaged js files will no longer be packaged into the vendor.js of the main package.

Method 4: Code compression

1. Click Run on HBuilder -> Run to the applet simulator -> Whether to compress the code during runtime

Insert image description here

2. Click Release on HBuilder -> Mini Program -> Release -> Mini Program - WeChat (only applicable to uni-app) (W)

Insert image description here

3. Click Release. Then the console will start compilation, and when the compilation is completed, the WeChat developer tools will automatically open.

Insert image description here

4. It has been reduced a lot now. It used to be 3.2M, but now it is only 1.8M. Now there is no problem whether it is used to upload code or debug.

Insert image description here