Quick application repackaging problem

There is one problem that should never be ignored when using Taro to develop fast apps, and that is the size problem.

Because of the quick app packaging feature (below 1080) in multiple pages, if a third party library is repeatedly applied, then the library code will be typed into the same page, resulting in the same code will be stored in multiple pages.

Because the current 1080 version of the app is not fully rolled out. If you rush to upgrade your app to a minimum platform version number of 1080, you will lose a lot of users from lower versions.

Official solution (version below 1080)

Of course, app officials are aware of this problem and have come up with an early solution.

That is, the code that multiple pages will depend on is all mounted to the global variable when the quick application is initialized.

When used on other pages, reference global variables directly.

// Import file
import day from 'day';

const globalRef = Object.getPrototypeOf(global) | |global;
globalRef.day = day;
Copy the code
// page usage
const globalRef = Object.getPrototypeOf(global) | |global
const day = globalRef.day

day()
Copy the code

Analyze what common code the project uses

Repackaged content, NPM dependencies will be the bulk of it, and it may be self-written common code.

What NPM dependencies are used in our project?

After Taro is packaged, the build artifacts under Dist/QuickApp separately place all NPM packages available to the project in the SRC/NPM/directory.

Common code analysis

As long as a JS is referenced by more than one page, it must cause double packaging problems.

Use Taro’s Alias feature to solve the problem of duplicate packaging

Alias is the feature of applying path aliases. Its implementation principle is very simple. The path replacement rules are formulated in the config file.

When taro is packaged, simply replace the application path with the correct application path.

{    
  '@src': 'src'.'@plugin': 'src/plugin'.'@components': 'src/components',}Copy the code

How can we use Alias to solve our packaging problems

Since Alias has the problem of replacing application paths, plus our third-party library can be used by all pages as long as it is mounted in a global variable.

This is the solution for combining the two features.

The first step is to modify the NPM alias

You’ll see why when you look at step two.

The classnames.ex file is a mapping file of classnames.

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

Step two, create a surrogate dependency

  1. copydist/quickapp/src/npmTo the contents ofsrc/replacement/npmIn the.
  2. insrc/replacementLet’s go ahead and create a new oneindex.jsThe general content of the file is as follows
import crypt from './npm/crypt/crypt'
import classnames from './npm/classnames'


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

globalRef.classnames = classnames;
globalRef.crypt = crypt;
Copy the code
  1. Make NPM dependency mapping files

Looking at this step, you should see why Alias replaces the normal NPM dependency path with a mapping file.

All page references to classnames will be retrieved from global variables.

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

Step 3: Reference it in app.jsreplacement

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

import './replacement';
// Replacement references must be placed after the @tarojs/taro application
// Be sure to initialize your code first.
// Avoid the order of references that would prevent other third-party libraries from using dependencies properly

Copy the code

So we can get around the double packing problem perfectly

The 1080+ version officially supports INDEPENDENT JS packaging

The official 1080+ version provides a separate js packaging method.

The specific use method can go to the official document to view, here is no more redundant.

Doc. Quickapp. Cn/framework/j…