uni-app
uni-app copied to clipboard
dcloudio
support webpack5
Are there any plans to support webpack5?
it seems uni is compiled via @vue/services which the new version already supports webpack 5.but simply updating the @vue/services version doesn't seem to work as there are still some uni custom plugins, is there any other way ?
使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。
npm install -g @vue/cli@5
vue create -p dcloudio/uni-preset-vue#alpha test
已知问题：
- ~~遗留部分警告未处理。~~
- ~~Win 平台 dev 模式编译结束（小程序、App）会结束进程。~~
使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。
npm install -g @vue/cli@5 vue create -p dcloudio/uni-preset-vue#alpha test已知问题：
- 遗留部分警告未处理。
- Win 平台 dev 模式编译结束（小程序、App）会结束进程。
Awesome work! 近期我将基于此进行升级工作。
btw，为什么在webpack4的模式下微信小程序模式打包基本没有cache的构建缓存，在项目体量上来之后，目前一次完整的watch mode 启动（1600多个模块），需要至少30-40s的时间。我看到了类似如下的逻辑
我是否错过了什么说明文档，是否可以配置什么去开启cache优化呢
使用 vue-cli 创建 alpha 分支已支持，使用中发现问题请反馈。
npm install -g @vue/cli@5 vue create -p dcloudio/uni-preset-vue#alpha test已知问题：
- 遗留部分警告未处理。
- Win 平台 dev 模式编译结束（小程序、App）会结束进程。
Awesome work! 近期我将基于此进行升级工作。
btw，为什么在webpack4的模式下微信小程序模式打包基本没有cache的构建缓存，在项目体量上来之后，目前一次完整的watch mode 启动（1600多个模块），需要至少30-40s的时间。我看到了类似如下的逻辑
我是否错过了什么说明文档，是否可以配置什么去开启cache优化呢
部分情况下（如使用条件编译或编译到多个平台）缓存会错乱，所以禁用了 cache。另外在 webpack5 内置了 cache 功能，但是框架近期更新并未处理和验证相关逻辑，使用时需要注意一下，后续我会单独验证和处理一下这部分。
文档是否可以更新一下呢？
我认为目前还没有到能正式使用的阶段，@vue/cli的相关uni插件也要同步更新，但是它仅处于alpha阶段，需要大量的验证和测试， 我初步进行了使用，可惜迁移并不太顺利。
btw，development开启了UNI_USING_CACHE以后，再次启动编译从26s，减少到了7s，还在进一步观察是否有缓存所带来的相关问题。但它确实会提供值得一试的优化效果
依赖更新到 2.0.1-alpha-35420220816001
- 默认关闭了 babel-loader 的 cache（调整为和 webpack4 一致）。
- 修复了导致小程序端组件编译失败的一些问题。
postcss出现一些弃用警告
trim: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
remove-scoped: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
add-id: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss出现一些弃用警告
trim: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration remove-scoped: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration add-id: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration
执行 npx @dcloudio/uvm alpha 更新一下依赖
@zhetengbiji 还有多久可以正式使用？
从目前的反馈看，已经可以正式使用，将会随着下个正式版的发布调整相关文档。
大概几号可以正式使用。
@zhetengbiji 还有多久可以正式使用？
从目前的反馈看，已经可以正式使用，将会随着下个正式版的发布调整相关文档。
大概几号可以正式使用。
从目前的反馈看，上个月已经可以正式使用。但下个正式版的发布才会调整相关文档。
当使用 Webpack5 时，如果在 src/pages.json 配置了 subPackages 字段分包，然后在 src/manifest.json 文件开启 optimization.subPackages 分包优化时，编译就会陷入死循环。
// src/manifest.json
{
"mp-weixin": {
"optimization": {
// 开启分包优化
"subPackages": true
}
}
}
经过调试发现 cacheGroups 的 test 传入函数时，第二个参数 chunks 不再是数组，
https://github.com/dcloudio/uni-app/blob/fbc8c10e6960c43c3c74e4d7a974ee22e3fc4be4/packages/vue-cli-plugin-uni/lib/split-chunks.js#L125-L157
而 optimization.subPackages 分包优化的逻辑是用到了第二个参数 chunks 的，导致在 Webpack 编译过程中执行报错，错误没有被捕获也没有抛出来，所以编译一直在运行。
test 参数结构如下图：
Webpack5 的文档在这里：https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunkscachegroupstest
目前我的处理方案是这样的，通过拦截 test 函数进行参数包装：
// vue.config.js
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
configureWebpack: config => {
const { cacheGroups } = config.optimization.splitChunks;
if (cacheGroups) {
Object.keys(cacheGroups).forEach(chunkName => {
const { test } = cacheGroups[chunkName];
if (typeof test === 'function') {
cacheGroups[chunkName].test = (module, { chunkGraph }) => {
return test(module, chunkGraph.getModuleChunks(module));
};
}
});
}
},
});
如果有空的话，还是希望官方能处理下这个问题，我看到在社区也有类似的文章，答案都是关闭 optimization.subPackages 选项。
