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