signed

QiShunwang

“诚信为本、客户至上”

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

2021/5/14 20:46:00   来源:

前言

  • 由于有个项目使用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");