问题描述

公司小程序项目有个页面需要用 canvas 绘制图片保存，其中图片资源是从后端获取的网络图片。然而在测试中发现，模拟器上图片能正常绘制，但真机只有开了调试模式才能显示图片，一旦关闭调试模式后，canvas 就空白一片，啥都看不见。

先举个栗子 🌰

假设我们一个用 webpack 打包的项目有以下场景

摘录来源：https://www.cnblogs.com/tugenhua0707/p/11760466.html

何为 Tree-Shaking

Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。

它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

在现代 JavaScript 应用程序中，我们使用模块打包(如webpack或Rollup)将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。

——> 来自 MDN

HbuilderX

在 HbuilderX 中第一次启动小程序

在 HbuilderX 里运行编译 uni-app 的微信小程序版，报：enable ide service (y/n) [27d [27c

在 vue 中有时 vuex 或者 computed 的数据改变后数据并不会进行重新渲染，只有刷新后数据才会重新加载，

但如果为了让页面重新加载而采用 window.reload()或者 router.go(0)进行刷新那加载慢闪烁白屏等问题会让客户体验及其不好

什么是骨架屏

骨架屏就是在页面尚未加载之前先给用户展示出页面的大致结构，直到页面请求数据后渲染页面。
骨架屏和 loading 相比较还是骨架屏用户体验感更好。
原理其实非常简单，就是在页面还没加载完成时展示一张图片（一般是 Base64 编码），类似下方效果：

概括

涉及到的分类

• 网络层面
• 构建层面
• 浏览器渲染层面
• 服务端层面

动态路由 + 路由鉴权

路由鉴权介绍

一般 Vue 的权限控制有两种方案：

@vue/cli-service-global 插件介绍

该 npm 包可以让你在零配置情况下，直接使用 vue serve 和 vue build 命令跑 *.vue 文件，并且可以把它编译打包成一个 Vue 插件。