How uniapp saves code size

With the rapid development of mobile Internet, more and more mobile application development frameworks have been launched. Among them, uniapp is a cross-platform framework based on Vue.js, which has the characteristics of one-time development and multi-terminal deployment. However, in development, code size is often a serious problem. Therefore, this article will introduce how to optimize uniapp to achieve code size savings.

1. Use compression tools

First, you can use compression tools to compress the code to reduce the size of the code. Currently, the more popular compression tools on the market include uglifyjs, terser, babili, etc. Among them, uglifyjs and terser are both JS compression tools, while babili is a JS compression tool specifically for ES2015. These tools can be used through webpack, rollup and other build tools. For example, using uglifyjs in webpack:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new UglifyJSPlugin()],
  },
};

Using terser in rollup:

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'build/bundle.min.js',
    format: 'cjs',
  },
  plugins: [terser()],
};

2. Introduce components on demand

Secondly, the components in uniapp also occupy a large part of the code space, so they can be introduced on demand to reduce the code size. In Vue.js, components can be introduced through Vue.use(), and in uniapp, components can be introduced through uni.plugins.requireLibrary().

import { Button, Switch } from 'uni-ui';

// 引入按钮和开关组件
uni.plugins.requireLibrary('Button,Switch');

// 使用按钮和开关组件
<template>
  <Button>按钮</Button>
  <Switch></Switch>
</template>

It should be noted that the on-demand introduction of components in uniapp requires the installation of the uni-ui library and needs to be dynamically introduced at runtime, so the logic of the code needs to be carefully considered during development.

3. Reduce the size of image resources

In addition, image resources are also an important part of the code size, so you need to pay attention to the reasonable use of image resources during development. In uniapp, you can use image compression tools to reduce image size. Commonly used image compression tools include tinypng, jpegoptim, pngquant, etc. Use these tools to reduce image size without reducing image quality.

4. Use font icons

In addition, font icons are also a more practical optimization method. Compared with image resources, font icons can reduce code size, reduce HTTP requests, and improve page loading speed. In uniapp, you can use the uni-icons library to introduce font icons.

// 引入 uni-icons 组件
import uniIcons from '@/components/uni-icons/uni-icons.vue';

// 使用uni-icons组件
<template>
  <uni-icons name="android"></uni-icons>
</template>

5. Use the Webpack plug-in

Finally, you can also use the Webpack plug-in to optimize the code. Common optimization plug-ins include clean-webpack-plugin, copy-webpack-plugin, optimize-css-assets-webpack-plugin, etc. These plug-ins can clean useless files, copy files to specified directories, optimize css and other operations, thereby reducing code size.

const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  //...
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([{ from: 'public' }]),
    new OptimizeCssAssetsPlugin(),
  ],
};

Summary:

The optimization of code size is a more important issue in uniapp development. By using compression tools, introducing components on demand, reducing the size of image resources, using font icons, and using Optimization methods such as Webpack plug-ins can effectively save code size. Therefore, it is necessary to attach great importance to the optimization of code size during development to improve application performance and user experience.

The above is the detailed content of How uniapp saves code size. For more information, please follow other related articles on the PHP Chinese website!