【小程序】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");