说在前面为什么需要按需加载和按需打包？打包很好理解，就是执行npm run build得到的dist文件夹，和我们添加压缩包一个道理，如果打包了一些本来不需要的资源，就会使得打包的最终文件变大，最终影响前端项目的加载效率。按需加载，比如我们的系统有5个模块，如果我们不做任何介入，Vue，React等框架默认的加载逻辑是把资源都下载到本地，然后执行后面的交互，如此一来，确实可以通过牺牲首次加载的时长

说在前面最近项目同事反馈webpack打包时间过长，修改一次代码就要编译好久，所以我针对我们的项目进行了打包优化尝试，但是因为vue-cli启动的项目不会显示webpack打包时长，不利于对每次打包时间进行对比分析，所以我们借助vue-cli脚手架实现这一功能。对于一个项目的打包效率，我认为一共分为三个指标：npm run build打包时长npm run serve启动时长每次对代码进行修改后的

说在前面现在前端发展的很迅速，一些脚手架（比如vue-cli）也很方便去搭建和应用，日常使用都没有问题，但是我觉得脚手架用多了总会让人去忽略一些基础的问题，对于系统后续的提升也无从下手，所以突发奇想，自己按照vue-cli的标准搭建一个框架，看看都要经历些什么。源代码参考准备首先，要安装node，安装好以后新建一个文件夹，然后初始化项目，node和npm是绑定的，所以不需要单独安装npm。npm

vue cli修改默认webpack配置背景​Vue CLI作为一个Vue的脚手架，帮助我们做了很多工作，比起create-react-app脚手架，丝毫察觉不到有webpack的身影，对于简单的开发工作，我们无需关注如何去修改他的默认配置，但是如果我们想做一些定制化的开发，比如修改一些公共变量或者添加一个插件，其实Vue CLI文档都有介绍，但是说实话为了理解这些东西我查了不少文档，说实...

说在前面目前我们项目，前端在打包并重新发布之后，系统经常会提示加载的页面发生异常，如下图：此时用户需要清除浏览器缓存，然后刷新才能看到正确的页面，目前项目处于测试阶段，等到真正部署并交由用户使用后，这种情况体验是比较差的。原因分析发生这种问题的原因，可能是加载的页面资源找不到了，但是为什么必须要清除缓存才可以解决问题呢？通过本地打包，发现打包之后的目录结构如下：通过上图可以发现，每次打包后生成的文

说在前面前端工程开发过程中会出现打包缓慢，或者打包过程中提示内存不足的情况，如果我们电脑内存足够，可以尝试分配更大的内存给node环境，以提升打包速度。提升打包速度实践提升打包速度，插件安装npm install --save-dev increase-memory-limitnpm install --save-dev cross-env然后在pageage.json中添加一行："scripts

背景开发过程中，经常由于一些代码的复制粘贴，或者编写时的一些不良习惯，导致代码可读性比较差，这个时候就需要一个代码格式化插件来帮助我们把不规范的代码格式化一下。VSCode中拥有大量的插件库，其中最具代表性的使用库就是Beautify了。设置VUE代码模板在我们开发过程中，难免会新建一些文件，那么可不可以当我们新建文件的时候，就把一些VUE文件中的基本信息给代入其中呢？比如，再比如一些钩子函...

问题背景今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。解决思路首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destr...

问题背景今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。解决思路首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destr...

文章中介绍了几种常见的实现响应式大屏布局的方案，分析了特性并且介绍了使用过程中遇到的一些需要注意的点，帮助大家读后能更好的理解，快去动手实践起来吧~