purifycss

初级分析：使用webpack内置的stats stats:构建统计信息 package.json中使用stats "scripts": { "build:stats":"webpack --env production --json > stats.json" } 复制代码 指定输出的json对象，输出一个json文件 Node.js 中使用 const webpack = require('webpack') const config = require('./webpack.config.js')('production') webacpk(config, (err, stats) => { if(err) { return console.error(err); } if(stats.hasErrors()) { return console.log(stats.toString("errors-only")) } console.log(stats); }) 复制代码 缺点：颗粒度太粗，看不出问题所在。 速度分析：使用speed-measure-webpack-plugin const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin') const smp = new

文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 减少请求数量 【合并】 　　如果不进行文件合并，有如下3个隐患 　　1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟 　　2、受丢包问题影响更严重 　　3、经过代理服务器时可能会被断开 　　但是，文件合并本身也有自己的问题 　　1、首屏渲染问题 　　2、缓存失效问题 　　所以，对于文件合并，有如下改进建议 　　1、公共库合并 　　2、不同页面单独合并 【图片处理】 　　1、雪碧图 　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台 　　2、Base64 　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 　　3、使用字体图标来代替图片 【减少重定向】 　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验 　　如果一定要使用重定向

1、使用 高版本 的 Webpack 和 Node.js 2、 多进程/多实例构建 ：HappyPack(不维护了)、thread-loader 3、压缩代码 webpack-paralle-uglify-plugin uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6) terser-webpack-plugin 开启 parallel 参数 多进程并行压缩 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。 4、 图片压缩 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式) 配置 image-webpack-loader 5、缩小打包作用域 exclude/include (确定 loader 规则范围) resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找) resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段) resolve.extensions 尽可能减少后缀尝试的可能性 noParse 对完全不需要解析的库进行忽略