uni-optimizers

• 简介
• 安装插件
• 基本用法
• 分包功能
  • 功能背景
  • 匹配模式
  • 分包机制
  • 示例代码
  • 特别注意

简介

基于vite编译器的uniapp优化插件集合

安装插件

npm install uni-optimizers --save-dev 

基本用法

1. 参考uniapp官方的vite配置初始化vite.config.js文件；

2. 参考如下的代码替换里面的内容：

import {defineConfig} from 'vite';
// import uni from '@dcloudio/vite-plugin-uni';
import optimize from 'uni-optimizers';
const uni=optimize();

export default defineConfig({
    plugins: [
        uni(),
    ],
});

分包功能

功能背景

node_modules依赖、componets组件以及uni_modules第三方组件，在构建过程中，无法根据分包配置和引用关系而进行分包。

如果不对node_modules分包，那么vendor会越来越大，最终就导致主包越来越大。

如果不对componets和uni_modules进行分包，所有的组件（特别是某子包才用到的组件）及组件对应的静态资源都会留在主包中，最终也导致主包越来越大。

匹配模式

如图所示模块关系，如果subpackage配置仅命中了Module B，那么Module B和Module D会被加入分包分析，而由于配置无法直接命中Module E且Module C没要求分包，因此Module E不会被加入分包分析。

分包机制

插件强制将根目录下的非“page”目录下面的所有js均视为不允许参与分包的全局资源，属于主包。事实上，情况通常就是如此。

如果模块A被主包和属于主包资源里的模块引用，那么模块A不会划分到子包，毕竟主包不能访问子包资源。

因此，综上所诉，只有在匹配模式中被加入分包分析且没有被主包内容引用的模块才会被拆分到对应的子包里面去。

示例代码

import {defineConfig} from 'vite';
// import uni from '@dcloudio/vite-plugin-uni';
import optimize from 'uni-optimizers';
const uni=optimize({
    subpackage:[
        //单独分包
        '^/node_modules/dependency-name/',
        '^/components/component-name/',
        '^/uni_modules/plugin-id/',
        
        //批量分包
        //但不建议对老工程这样大动干戈
        //'^/node_modules/.*',
        //'^/components/.*',
        //'^/uni_modules/.*',
    ],
});

export default defineConfig({
    plugins: [
        uni(),
    ],
});

特别注意

1. components下的组件必须遵循easycom规范；

2. uni_modules下的内容必须遵循uni_modules规范；

3. 不要在根目录下的全局js中引用需要分包的node_modules模块，原因参看分包机制；

4. components内的组件用到的静态资源也要分包时，资源要放在'static/$组件目录名/'下；

5. uni_modules内的组件用到的静态资源也要分包时，资源要放在'uni_modules/static/$组件目录名/'下；

6. 要分包的资源的路径若要写在js里，请用完整字符串字面量，不支持拼接，如'static/$组件目录名/'+$name+'.png'；

7. 若js里的资源路径过多，建议建立映射来引用，如{'1':'/static/$组件目录名/1.png','2':'/static/$组件目录名/2.png'}；