What should I do if the size of uniapp packaged into a small program is too large?

With the development of mobile Internet, small programs have become the choice of more and more enterprises and developers. As a multi-terminal development framework, uniapp is increasingly favored by developers. However, in the process of using uniapp to develop small programs, many developers have encountered the same problem - the packaged small program is too large. So, how do we solve this problem?

First of all, you need to understand that when uniapp packages the applet, it will package the codes of all platforms into one file. This will cause the size of the mini program to become larger, and users will need to consume more data when downloading the mini program, affecting the user experience. Therefore, we need to take some measures to reduce the size of the mini program.

1. Configuring the build configuration file

In the uniapp project, we can reduce the size by configuring the build configuration filevue.config.js Mini program size. The specific method is as follows:

(1) Enable multi-threaded construction

Add the following configuration in the vue.config.js file:

parallel: require('os').cpus().length > 1

This will work Enable multi-threaded builds to increase running speed and reduce file size.

(2) Compression code

Add the following configuration in the vue.config.js file:

configureWebpack: {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        warnings: false,
                        drop_console: true, // 生产环境移除console
                        drop_debugger: true // 生产环境移除debugger
                    },
                    output: {
                        // 最紧凑的输出
                        beautify: false,
                        // 删除所有的注释
                        comments: false
                    }
                }
            })
        ]
    },
    plugins: [...]
}

This way you can use TerserPluginThe plug-in performs code compression to reduce file size.

(3) Use CDN to introduce third-party libraries

Add the following configuration in the vue.config.js file:

configureWebpack: {
    externals: {
        'vue': 'Vue',
        'vant': 'vant'
    },
    plugins: [...]
}

This way you can use CDN Introduce third-party libraries to reduce file size.

2. Remove unnecessary components and plug-ins

When developing uniapp applet, sometimes we will introduce some unnecessary components and plug-ins, which will also cause the application The size of the program increases. Therefore, when packaging, we can remove unnecessary components and plug-ins from the project and reduce the size of the application. For example, you can use the webpack-bundle-analyzer plug-in to analyze the volume of the packaged files, find out which files account for a larger proportion, and further optimize the code.

3. Use mini program cloud development

If the packaged mini program is still too large in size, you can consider using mini program cloud development. Mini program cloud development can place the business logic of the application in the cloud, making the mini program smaller in size. It can also improve development efficiency and running speed, and improve user experience.

In short, the problem that the size of uniapp packaged into a small program is too large can be solved by configuring the build configuration file, removing unnecessary components and plug-ins, and using small program cloud development. Developers can flexibly choose the above methods according to actual needs.

The above is the detailed content of What should I do if the size of uniapp packaged into a small program is too large?. For more information, please follow other related articles on the PHP Chinese website!