dtbk123的博客

fp是指网页首次渲染，fcp是指网页首次有内容的渲染。两者可以通过window.performance.getEntriesByType("paint")获取详细信息，一般情况两者时间相等fmp页面主要内容绘制到屏幕的时间fsp页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容fci页面第一次可以响应用户输入的时间fps每秒可以重新绘制的帧数tti用户第一次可以持续与页面进行交互的时间...

vue骨架屏是为了在首屏加载时提高用户体验制作的，有很多种方法，最近学了一种通过自定义webpack插件来生成骨架屏的方法首先在项目根目录下新建一个myPlugin.jsfunction MyPlugin(options){ this.options=options;}//webpack插件都内置一个apply方法MyPlugin.prototype.apply=function(complier){ complier.plugin('compilation',(comp

1.<keep-alive></keep-alive>,接收include，exclude，max三个值，可以缓存组件状态，避免组件的重新渲染，exclude的优先级大于include，max为可缓存组件数目的最大值，超过会调用最近最少使用算法2.组件懒加载Vue.component('Home',function(resolve){reuqire(['./home'],resolve)})Vue.component('Home',()=>import('

有一种技术叫离线缓存，就是断开网络还能显示页面内容，它有两种方法，一种是appcache，不过它性能不好，已经被w3c废弃了，还有一种就是serviceWorker，它属于PWA（渐进式web应用）的一种功能。首先要下载sw-precache-webpack-plugin，即npm isw-precache-webpack-plugin或者yarnaddsw-precache-webpa...

上篇说到了happypack可以让webpack分成多个子进程去打包代码，然后再将结果返回给主进程，其实压缩代码的时候也可以使用多进程，这样也可以提高构建速度，而webpack-parallel-uglify-plugin就做到了这一点const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugi...

我们知道js是单线程的，在打包大型项目的时候，，只有一个一个的处理任务，速度比较慢，HappyPack可以将打包任务分解给多个子线程去执行，然后再将执行结果返回给主进程，提高webpack构建速度const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');const HappyPack...

webpack插件中有一个DllPlugin，它可以打包出一个个单独的动态链接库文件，一个动态链接库可以包含多个模块。那么它为什么可以提高构建速度呢？因为包含大量复用的动态链接库只需编译一次，在之后的构建中被动态链接库包含的模块不会被重新编译，而是直接使用动态链接库的代码。首先新建一个webpack_dll.config.js文件const path=require('path');con...

webpack有一个配置项是optimization，它会分析入口文件中有没有共用的代码，有的话会单独打包成一个chunkconst path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:'./src/index.js', ...

首先，这三个都是link标签的rel属性值。preload是让浏览器提前加载指定的资源，加载后先存放在内存中，不会立即执行，需要的时候再执行。这样可以让加载和执行分离开来，提前加载指定的资源，不会阻塞渲染和document的onload事件，对跨域的文件使用preload要加上crossorigin属性，preload还有as属性，可以设置资源加载的优先级，还可以设置资源加载完的回调函数onloa...

对于一些库文件，在使用webpack打包时我们可以将他们排除，然后再使用cdn的方式引入，比如jqueryconst path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={ entry:'./app.js', output:{ p...