快应用重复打包问题

使用Taro开发快应用,有一个问题绝对不能忽视,那就是体积问题.

因为快应用打包的特性(1080以下)多个页面里,如果重复应用了一个第三方库,那么这个库的代码会一起打到这个页面中,导致一样的代码会存在多个页面中.

因为目前1080版本的快应用没有全面铺开.如果你贸然升级自己快应用的最低平台版本号为1080. 你将会失去大量低版本的用户.

官方给出的解决方案 (1080以下版本)

当然快应用官方也意识到了这个问题,给出了最早期的解决方案.

那就是将多个页面会依赖到的代码,全部在快应用初始化的时候挂载到全局变量上面.

其他页面使用的时候,直接引用全局变量就可以了.

// 入口文件
import day from 'day';

const globalRef = Object.getPrototypeOf(global) || global;
globalRef.day = day;

// 页面使用
const globalRef = Object.getPrototypeOf(global) || global
const day = globalRef.day

day()

分析项目使用了哪些公共代码

重复打包的内容,npm依赖会占大头,也有可能是自己写的公共代码.

我们的项目用到了哪些npm依赖?

Taro打包之后,dist/quickapp 下的构建产物会单独把所有项目能用到的npm包放到 src/npm/ 目录下.

公共代码分析

只要一个js被多个page引用,就必须会造成重复打包的问题.

使用Taro的 alias 特性解决重复打包的问题

alias 是应用路径别名的特性,他的实现原理很简单,在config文件中制定好路径替换规则.

在taro打包的时候,直接替换应用路径成为正确的应用路径就可以了.

{    
  '@src': 'src',
  '@plugin': 'src/plugin',
  '@components': 'src/components',
}

如何使用alias解决我们的打包问题

既然 alias有替换应用路径的问题,再加上我们的第三方库只要挂载到全局变量中就可以让所有页面都可以使用到.

两个特性结合起来的解决方案就是这样的.

第一步,修改npm的alias

为什么要这样做,看到第二步你就会明白.

classnames.ex 文件为classnames的映射文件.

{
    'classnames': 'src/replacement/classnames.ex',
    'prop-types': 'src/replacement/prop-types.ex',
    'mobx': 'src/replacement/mobx.ex',
}

第二步, 制作替身依赖

1. 拷贝 dist/quickapp/src/npm 中的内容到src/replacement/npm中.
2. 在src/replacement下新建一个index.js文件,大致内容如下

import crypt from './npm/crypt/crypt'
import classnames from './npm/classnames'


const globalRef = Object.getPrototypeOf(global) || global

globalRef.classnames = classnames;
globalRef.crypt = crypt;

1. 制作npm依赖映射的文件

看到这一步,你应该就会明白为什么alias为什么会将正常的npm依赖路径替换到一个映射文件.

所有页面的对classnames的引用,都将是从全局变量中获取.

// src/replacement/classnames.ex
const globalRef = Object.getPrototypeOf(global) || global;
export default globalRef.classnames;

第三步, 在app.js中引用 replacement

import Taro, { Component } from '@tarojs/taro';

import './replacement';
// replacement的引用,必须要放在@tarojs/taro应用的后一句
// 务必在最前初始化自己的代码.
// 避免引用顺序的问题,导致其他的第三方库不能正常使用依赖

这样我们就可以完美绕过重复打包的问题

1080+版本官方支持js独立打包

官方在1080+的版本中提供了js独立打包的方法.

具体使用方法可以去官方文档查看,这里就不过多赘述了.

https://doc.quickapp.cn/framework/js-split.html

微信公众号

本文链接：