1. 首先安装webpack的可视化资源分析工具，命令行执行： 2. 然后在webpack的dev开发模式配置中，引入插件，代码如下： 3. 最后命令行执行npm run build --report , 浏览器会自动打开分析结果，如下所示： 可以看到vue全家桶相关依赖占用了…

在我的项目中，有时需要展示上万条甚至十万条数据，而如何在保证性能的前提下高效地渲染这些数据成为了我面临的难题。在经过一段时间的摸索和实践后，我积累了一些经验和技巧，现在我将这些分享给大家。

本文已参与[新人创作礼]活动，一起开启掘金创作之路 详解路由懒加载 因此， 在网上参考一些资料后，归纳出了这篇文章 学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Pa

web性能说白了就是网站打开速度快不快，页面中的动画够不够流畅，表单提交的速度是否快，列表滚动页面切换是否卡顿。性能优化就是让网站变得快。 在MDN上对web性能的定义是网站或应用程序的客观度量和可感

随着前端项目中使用的依赖包越来越多，而其中一部分依赖包可能并未被项目所使用，手动查找这些依赖包既耗时又繁琐。那么，有没有工具能够快速地帮助我们识别和清理项目中未使用的依赖包呢？本文将介绍两个常用的工具

webpack cache 发布3年多了, 在历史包袱中的项目中其实非常好用. 本文会介绍 cache 在一个项目中的实践经验, 和实现原理, 以及了解流程后的一些推论.

序言 如果打开一个文件，看到的全是满屏幕的 import 语句，这将是一种怎样的体验？ 密密麻麻的import语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。 我们是如何做到让import

讲前端资源缓存之前，我们先看两个场景： 场景一： 某业务沟通群 内部员工A：技术老师们，XX系统没法访问了 产品同学B：@技术同学C，麻烦技术同学帮忙看一下 技术同学C：@测试同学D，测试同学帮忙复现

在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 -…