uniapp原理

uniapp的实现方案

编译器：

• 1、比较通用的方式是：把单文件vue给编译成 .js/.json/.wxml/.wxss微信小程序识别的文件 【业界使用的方式】
• 2、一步到位，直接把vue文件编译成微信开发者工具打包后的js 【这种方式可读性非常差，在开发者工具调试也很麻烦】

template = >wxml

script => js

style => wxss

运行时：

• 数据同步机制

uniapp->将数据的控制器完全交给了vue -> 由vue来控制data的修改 -> 最后在同步给微信小程序的AppData -> 小程序负责页面的展示

• 事件代理机制

当用户在小程序进行操作，触发了一些事件，会经过uniapp转发给vue

• 生命周期

uni-app将小程序的生命周期代理到了vue中，然后开发人员只需要在vue中写具体的生命周期

uniapp相比微信小程序 做了哪些性能优化

• 底层自动diff差量更新数据，比手动setData性能更高

1. 打包优化：Uniapp针对不同平台进行了打包优化，可以根据平台差异进行差异化编译，减小包体积和启动时间。
2. 图片优化：Uniapp针对不同平台的图片加载做了优化，例如针对iOS平台采用原生方式加载图片，可以提高图片加载速度。
3. 渲染优化：Uniapp采用了类似虚拟DOM的渲染方式，减少了DOM操作，提高了渲染效率。
4. JSBridge优化：Uniapp针对不同平台的JSBridge进行了优化，提高了JavaScript与原生代码的通信效率。
5. 数据缓存：Uniapp提供了本地数据缓存功能，可以在应用程序中缓存数据，减少服务器请求次数。

uniapp针对不同平台进行的性能优化

打包优化：

针对微信小程序平台，可以在 vue.config.js中配置 configureWebpack，使用 TerserPlugin进行代码压缩和文件合并：

javascript

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 删除console语句
              drop_debugger: true, // 删除debugger语句
            },
            output: {
              comments: false, // 删除注释
            },
          },
        }),
      ],
    },
  },
}

针对H5平台，可以使用 @babel/preset-env对不同浏览器做兼容性处理，在 babel.config.js中添加如下配置：

javascript

// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage',
      corejs: 3,
      targets: {
        'ie': '11',
        'chrome': '58',
        'safari': '11.1',
        'firefox': '60',
        'edge': '17',
      }
    }]
  ]
}

图片优化：

针对iOS平台，可以在 index.html中添加 apple-touch-startup-image标签，使用原生方式加载图片：