让uni-app小程序“瘦身”：条件打包静态素材目录揭秘

2023-08-29 06:19:45

uni-app小程序打包机制的奥秘：巧用编译条件打造定制化包体

理解uni-app小程序的打包机制

uni-app小程序的打包过程，本质上是将代码、资源和第三方库等素材编译成一个或多个可在微信开发者工具中运行的包。在这个过程中，uni-app会根据不同的编译条件（如模板选择、环境配置等）生成不同的静态素材目录。

tpl_more与tpl_mars的打包差异

在Hbuilder中运行tpl_more时，微信开发者工具中的static目录仅包含tpl_more子目录，而运行tpl_mars时，static目录仅包含tpl_mars子目录。这是因为uni-app在打包时，会根据编译条件决定是否打包某个静态素材目录。如果编译条件中没有指定某个模板，那么该模板对应的静态素材目录就不会被打包。

根据不同编译条件打包不同静态素材目录

为了实现根据不同编译条件打包不同静态素材目录，我们需要修改uni-app的编译配置。具体操作步骤如下：

打开Hbuilder，在项目根目录下找到build目录。
打开build目录下的webpack.uni.prod.js文件。
找到以下代码：

entry: {
  'common/runtime': [
    'src/common/runtime.js'
  ],
  'common/vendor': [
    'src/common/vendor.js'
  ],
  'tpl_more': [
    'src/tpl_more/main.js'
  ],
  'tpl_mars': [
    'src/tpl_mars/main.js'
  ]
},

将entry对象中的模板对应的静态素材目录（如tpl_more、tpl_mars）移动到不同的编译条件中。 例如，如果我们想让tpl_more在编译条件为prod时打包，而tpl_mars在编译条件为dev时打包，那么我们可以将代码修改为：

entry: {
  'common/runtime': [
    'src/common/runtime.js'
  ],
  'common/vendor': [
    'src/common/vendor.js'
  ],
  'prod': [
    'src/tpl_more/main.js'
  ],
  'dev': [
    'src/tpl_mars/main.js'
  ]
},