uni-app开发微信小程序在分包pages_extra/ai/ai页面（npm i marked下载的插件）使用import导入marked插件之后主包体积变大了 打包不了了，具体解决方式及代码实现

在使用uni-app开发微信小程序并引入npm包时，如果直接在代码中import会导致整个包被打入主包，从而增加主包的体积。为了优化包体积，可以使用webpack的分包功能将特定的npm包分到子包中。具体操作步骤如下：

1. 在`package.json`文件中，使用`externals`属性指定不需要打包进主包的npm包，这样webpack在打包时会忽略这些包，而是从外部引入。

2. 修改`webpack.config.js`配置文件，使用`splitChunks`插件将指定的包分到子包中。

3. 在页面或组件中，使用`<script setup>`和`<script>`的懒加载语法来按需加载子包。

下面是一个简单的代码示例：

**package.json:**

{
  "externals": {
    "marked": "marked"
  }
}

**webpack.config.js:**

module.exports = {
  // 其他配置...
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      minSize: 10000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 100,
      maxInitialRequests: 100,
      automaticNameDelimiter: '~',
      cacheGroups: {
        // 添加一个缓存组，用于将marked等包分到子包中
        'marked': {
          name: 'package/marked',
          test: /[\\/]node_modules[\\/](marked)[\\/]/,
          priority: -10
        }
        // 可以根据需要添加更多缓存组
      }
    });
  }
};

**页面或组件:**

<template>
  <!-- 页面内容 -->
</template>

<script setup>
// 使用import引入marked，但通过externals配置，marked不会被打包到主包中
import marked from 'marked';
</script>

<script>
export default {
  // 页面或组件的其他配置
};
</script>

确保在`manifest.json`中配置子包的路径，以便微信小程序正确加载它们。

完成以上步骤后，重新运行构建命令，marked插件应该会被分包到指定的子包中，而不会影响主包的体积。