本文主要是介绍【小程序】taro-ui-vue 小程序开发模式优化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
- 由于有个项目使用taro-ui-vue+moment导致开发模式体积巨大,微信无法预览,只能build出来进行预览,所以进行按需加载优化。
taro-ui-vue优化
- taro-ui-vue的目录要把at-给去了,里面的文件夹都是去了at-的,比如引入的是At-Button,那么导入的位置是button。
- 所以使用万能按需加载插件import:
[
"import",
{
libraryName: "taro-ui-vue",
customName: (name, file) => {
const newName = name.slice(3);
return `taro-ui-vue/src/components/${newName}/index.vue`;
},
},
"taro-ui-vue",
],
- 使用自定义名称找到对应路径进行按需加载。
- 这样代码量就一下子优化了。
moment优化
- moment国际化包实在太多,也需要去除。好在taro框架提供了webpack-chain的配置让我们可以增加插件。
- 我们可以使用ignore-plugin来去除moment中local的文件。再通过手动导入zh的locale即可。顺便使用bundle-analyse进行分析。
webpackChain(chain, webpack) {
chain.module;
chain
.plugin("IgnorePlugin")
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
chain.plugin("bundleAnalyse").use(new BundleAnalyzerPlugin()).end();
},
require("moment/locale/zh-cn");
这篇关于【小程序】taro-ui-vue 小程序开发模式优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!