Explore the oversize problem and solution of uniapp

With the popularity of mobile Internet, application development has become more and more important. On the basis of native development according to different operating systems and devices, hybrid development has also become a popular choice. As a cross-platform development framework, uniapp can help developers quickly build multi-terminal applications. However, some developers have encountered a headache when developing with uniapp: the application size is too large and cannot be previewed or published. So, how should we solve this problem? This article will explore this problem and provide a solution.

1. The occurrence of the problem

The problem of excessive size of uniapp comes from the characteristics of the framework itself. In order to ensure the cross-platform capabilities of uniapp, the official provides UI component libraries and adaptation solutions for multiple platforms. Although these component libraries and adaptation solutions ensure the compatibility of uniapp on different platforms, they also make the application size larger. Component libraries and adaptation solutions for different platforms may contain a large number of images, fonts, JavaScript code and other resources, which will increase the size of the application.

2. Official solution

Regarding the problem of excessive size of uniapp, the official also provides some solutions. The following are some effective solutions:

1. Subpackage loading

Subpackage loading is a kind of resource that separates the application, putting some resources into a separate package and loading it on demand. , thus reducing the size of the application. In uniapp, introducing subpackaging needs to be set in the manifest.json file. The specific settings are as follows:

{
  "subPackages": [
    {
      "root": "pages/book/",
      "name": "book",
      "pages": ["index", "details"]
    }
  ]
}

The above code defines a sub-package named "book", which contains two pages: pages/book/index and pages/book/details. When referencing these pages in the application, you can use jump functions such as uni.navigateTo() to load them.

2. Compressed resources

The application contains mostly pictures, fonts, JavaScript and other resources. By compressing these resources, you can reduce the size of your application. In uniapp, you can use third-party compression tools such as TinyPNG, Webpack, etc. to compress resources.

3. Use Webpack for code unpacking

Webpack is a popular front-end build tool that can package code. In uniapp, you can use Webpack to unpack the application code and package part of the JavaScript code into separate files. Different from sub-packaging, using Webpack for code unpacking can put the core code of the application into the main package, making the application start faster.

3. Other solutions

In addition to the official solutions, there are some other solutions worth exploring:

1. Use font icons to replace pictures

In uniapp, font icons can be used instead of image resources. The advantage of font icons is that their file size is smaller and they can be manipulated and edited directly through CSS. The specific usage is as follows:

<template>
  <view>
    <text class="iconfont">&#xe600;</text>
  </view>
</template>

<style>
  .iconfont {
    font-family: "iconfont"; /*引入字体*/
    font-size: 32px; /*设置字体大小*/
    color: red; /*设置字体颜色*/
  }
</style>

The above code introduces a font named "iconfont" and uses CSS to style it. In actual use, different icons can be set through text.

2. Use svg pictures instead of bitmaps

In uniapp, you can use svg vector pictures to replace bitmaps. The advantage of svg pictures is that the file size is smaller and does not involve pixels. Infinite zoom in and out without loss of clarity. But it should be noted that if the svg image contains a large number of vector paths and a large number of Clip-paths. It will also cause the size of svg to be relatively large.

4. Summary

Excessive size is a major problem of uniapp, but it does not mean that there is no solution. Through solutions such as subpackaging, compressing resources, using Webpack to split code, and using font icons and SVG images instead of bitmaps, the size of the application can be effectively reduced. In actual development, we can choose different solutions based on the characteristics of the application to achieve optimal results.

The above is the detailed content of Explore the oversize problem and solution of uniapp. For more information, please follow other related articles on the PHP Chinese website!