1、大文件定位 　　我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 　　安装：npm install ...

相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间 ...

的问题。那么如何从视觉效果上减小首屏白屏的时间呢？ 　　骨架屏：举个例子：其实就是在模版文件中id=ap ...

使用 vue-cli 搭建项目 下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下： npm install cnpm -g --registry=https ...

一、 安装 node.js 安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。 二、安装webpack 安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。 三、安装 vue-cli ...

目录 Vue-CLI 项目搭建 CLI CLI创建项目 方式一：命令行创建-vue create 方式二：使用图形化界面-vue ui 如何删除CLI预设 Vue项目目录及运行 ...

实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路，我将骨架屏也看成路由组件，在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head 标签中。这样等前端渲染完成时，Vue 将使用客户端混合，把挂载点中 ...

骨架屏的意思就是，在页面数据没有渲染完成之前，把页面的答题框架展示出来，解决白屏问题，提升用户体验 骨架屏实现方式有三种： 一、图片代替：不灵活，且图片加载也是需要时间的，不推荐 二、页面结构写死：不灵活，不能复用，如果多个页面需要用到，得写多个，不推荐 三、通过webpack配置：可灵活 ...