susy123 / susy123.github.io Goto Github PK

https://susy123.github.io/vue-cli-report/

webpack-bundle-analyzer 分析报告

大家都看过这种 webpack 分析报告吧，是由插件 webpack-bundle-analyzer 生成，用来在论文、ppt 或者博客里炫耀是最好用不过了。

好消息是 vue-cli 官方已经集成了这个插件功能。

可是第一次使用 npm run build –report 却发现并没有生成 report.html;

傻眼

网上搜索一下，都是让在 vue.config.js 里 require webpack-bundle-analyzer, 然后 configureWebpack 里增加 plugins。

改完 vue.config.js 后，运行 npm run build 就能自动打开一个网页，运行在 8888 端口，显示 webpack 分析报告。

可是之前就是这样用啊，vue-cli 官网说已经支持了，不可能还需要我们自己手动修改 vue.config.js 吧？这个功能实现很简单，不可能留给我们提 pr 的机会吧（做起了给 vue 提 pr 的美梦）。。。

找到 cli-service 的执行代码，

看这个情况是明显是已经支持了，不需要手动改 vue.config.js。

那问题出在哪里呢。加点 log 看一下，args 的 report 根本是 false 啊。

再仔细一看，npm 根本就没有把 –report 这个选项传下去。

换用 yarn 试一下：

人家 yarn 可以啊，npm 为什么不行？
不可能吧，这个全球工具不会给我留 pr 机会吧。。。
扒一扒官方文档，

npm 对不起，是我不够了解你 。再来一次：

这才是正确的姿势。查看 dist 目录下，已经有了 report.html。
（还是觉得这个用法有点不符合习惯。）
当然除了用 yarn build –report, 也可以在 package.json 里面增加 scripts. 只要姿势对，repoort.html 就会出现。

https://susy123.github.io/kbone/

图片
1、base64打包进去的图片可以正常显示

2、稍大图片使用base64不太经济，建议以网络链接引入
src=”https://test.miniprogram.com/res/going_0bd161.png”

kbone-cli 生产的默认项目
生成的默认项目用的 kbone-ui是 0.5.2版本，需要手动升级到0.6.2；否则swiper组件会有问题。

关于跳转后小程序左上角返回键问题
只有页面栈>1的时候才会有返回键，就是你必须是从别的页面跳转过来的。

kbone支持多页，只需要在build目录下的miniprogram.config.js以及webpack.mp.config.js里配置router和entry等信息，就可以使用window.open进行不同页面跳转，小程序会相应的返回键。

单页内使用vue-router进行路由不会出现返回键，因为这只是vue的router组件内容的切换，对于小程序而言页面没有变化，而且切换的时候，也没有小程序页面从右往左划入的效果。

单页内使用window.open在web里可以跳转，但是小程序里是不行的。

官方的kbone-cli提供的是单页配置，多页配置可参考 https://github.com/Tencent/kbone/tree/develop/examples 里面的demo5和demo18

某些不适配的dom/bom
虽然此方案将完整的 vue runtime 包含进来了，但必然存在一些无法直接适配的接口，比如 getBoundingClientRect，一部分会通过 dom/bom 扩展 api 间接实现，一部分则完全无法支持。查看 dom/bom 扩展 api 文档。
web和小程序业务逻辑不一致的部分
可能存在部分逻辑在 web 端和小程序端需要使用不同的实现，该部分代码可以抽离成一个单独的模块或者插件，暴露接口给业务端代码使用。在模块内可以使用上述提到的 process.env.isMiniprogram 环境变量进行判断区分当前运行环境。比如上述提到的 actionSheet 实现就可以抽离成一个 vue 插件实现。

PS：注意这里使用 process.env.isMiniprogram 环境变量时尽量不要加其他动态条件，以方便 webpack 编译时剪除死代码，比如 if (false) { console.log(‘xxxx’) } 就属于死代码
无需在小程序展示的 dom 节点
可以使用另外一个 loader 对这些节点进行删减，在 webpack 配置中 vue loader 执行之前再添加一个 vue-improve-loader：

然后在 vue 文件中给要剔除的节点加上 check-reduce 属性：

因为 web 端代码构建和小程序端代码构建走不同的配置，所以 web 端代码会忽略这个属性，而小程序端代码则会删减掉带这个属性的节点。以下便是会输出给 vue-loader 的代码，从构建层面上剔除掉不需要的节点。

PS：vue-improve-loader 必须在 vue-loader 之前执行，这样 vue-loader 才会接收到被删减后的代码。

小程序的某些节点不想在web里显示
比较优雅的解决方案是：vue-improve-loader里增加逻辑来进行增减，类似上面的 check-reduce这样的

// 判断节点属性
for (const attr of node.attrs) {
// 检查是否需要删减
if (attr.name === 'check-reduce') {
noCheckReduce = false
return ''
}

    // 检查是否需要替换 tagname
    if (attr.name === 'check-replace-tagname') {
        node.tagName = attr.value
    }
}

写loader的方式，可以再打包的时候就剔除结构。
如果不这么做的话，也可以通过process.env.isMiniprogram做逻辑判断，加变量然后v-if。

要在打包的时候直接剔除结构得写loader；
想使用小程序的内置组件
尽量用html标签代替。
一部分内置组件在 html 中没有标签可替代，那就需要使用 wx-component 标签或者使用 wx- 前缀，基本用法如下：

<wx-component behavior=

https://susy123.github.io/lint-structure/

提高代码质量，推动代码规范，从源头把控软件产品质量，已经在研发体系形成共识。
之前采取过的方式有：
1）编写文档类代码规范，比如word、wiki等形式，组织培训宣传，召集开发者进行学习；
2）设置code review机制，合并代码时多人审查。
这两种方式，存在成本高、效率低、难度大等问题，代码规范审查容易慢慢流于形式。