【小程序】taro-ui-vue 小程序开发模式优化

本文主要是介绍【小程序】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 小程序开发模式优化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！