uni-app开发微信小程序在分包pages_extra/ai/ai页面(npm i marked下载的插件)使用import导入marked插件之后主包体积变大了 打包不了了,使用packOptions matrix配置具体代码实现
时间: 2024-09-10 08:09:37 浏览: 56
uni-app使用微信小程序云函数的步骤示例
在uni-app中开发微信小程序时,如果遇到分包页面使用import导入第三方npm插件导致主包体积增大的问题,可以尝试使用分包独立构建的方式进行优化。这样可以将依赖的插件放在分包中独立构建,不会影响主包的大小。
具体操作步骤如下:
1. 首先确保你的项目已经安装了marked插件,使用npm安装命令:`npm i marked`。
2. 在项目根目录下的`package.json`文件中配置`packOptions.matrix`,可以按照如下示例配置,指定分包独立构建:
```json
"packOptions": {
"matrix": {
"projectname": {
"subpackages": [
{
"name": "pages_extra",
"root": "./pages_extra",
"build": false, // 指示该分包不需要构建
"import": [
"marked" // 明确指定在分包中引入marked插件
]
}
]
}
}
}
```
3. 在`manifest.json`中配置分包的路径和别名:
```json
{
"mp-weixin": {
"subpackages": {
"pages_extra": {
"root": "./pages_extra",
"pages": [
"ai/ai"
],
"usingComponents": {}
}
}
}
}
```
4. 在分包的页面中,直接使用`require`或者`import`来引入marked插件:
```javascript
// 使用require的方式引入
const marked = require('marked');
// 或者使用ES6的import方式引入
import marked from 'marked';
```
5. 执行构建命令,比如在命令行输入`npm run dev/mp-weixin`进行构建,检查是否已经将marked插件正确地放到分包中去。
通过以上步骤,你可以尝试优化分包体积,减轻主包的负担。如果遇到其他问题,请按照错误提示进行调整。
阅读全文