一、体积层面
1、 图片压缩
这个网站压缩的图片肉眼看不出变化，不会变模糊 压缩图片网址 https://tinypng.com/
2、图片选择
PC端图片大小与实际大小一致
移动端图片用2倍图
3、 Gzip压缩代码
（准备将配置加入到脚手架，推荐此方法，效果比较明显）
下载依赖
npm i [email protected] –D
constCompressionWebpackPlugin = require('compression-webpack-plugin');
constprodGzipList = ['js', 'css'];
...
const webpackConfig = (memo, { env, webpack, createCSSRule }) => {
if (env === 'production') {
// 生产模式开启
memo.plugin('compression-webpack-plugin').use(
new CompressionWebpackPlugin({
// filename: 文件名称，这里我们不设置，让它保持和未压缩的文件同一个名称
algorithm: 'gzip', // 指定生成gzip格式
test: new RegExp('\.(' + prodGzipList.join('|') + ')$'), // 匹配哪些格式文件需要压缩
threshold: 10240, //对超过10k的数据进行压缩
minRatio: 0.6, // 压缩比例，值为0 ~ 1
})
);
}
};
打包后dist目录下会出现压缩过的文件
nginx配置文件添加一行配置
gzip_static on;
4、分包
分割各个模块代码，提取相同部分代码
/**
* memo，当前 webpack-chain对象
* env，当前环境，development、production 或 test 等
* webpack，webpack 实例，用于获取其内部插件
* createCSSRule，用于扩展其他 CSS 实现，比如 sass, stylus
* @param {*} memo
* @param {*} { env, webpack, createCSSRule }
*/constwebpackConfig=(memo,{ env, webpack, createCSSRule })=>{// 分包
memo.optimization.splitChunks({chunks:'all',automaticNameDelimiter:'.',// 文件名分隔符name:true,minSize:30000,maxSize:0,minChunks:1,maxAsyncRequests:10,maxInitialRequests:5,cacheGroups:{antd:{name:'antd',chunks:'all',test:/(antd|@ant-design|dynamic-antd-theme)/,priority:10,},lodash:{name:'lodash',chunks:'all',test:/(lodash|lodash-decorators)/,priority:10,},echarts:{name:'echarts',chunks:'all',test:/(echarts)/,priority:11,},vendors:{name:'vendors',chunks:'all',test:/(moment|react-dom|axios|zrender|immutable|redux|redux-saga|dva|qs|draft-js|fbjs)/,priority:11,},rcVendors:{name:'rcVendors',chunks:'all',test:/(rc-)/,priority:11,},},});};
5、良好的编码习惯
组件化；封装公用函数、使用公用变量、className，减少重复代码；使用简洁的写法；
6、按需引入组件库插件
使用这样的写法
import isEqual from 'lodash/isEqual';
使用 babel-plugin-import
npm i -D babel-plugin-import
7、tree shaking
webpack4默认开启
参考文章
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YyczoFxg-1661423040672)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a5c0cd7abd8427abf736bb8960fb195~tplv-k3u1fbpfcp-zoom-1.image)]
8、CDN链接代替依赖包
CDN技术：分布式的内容分发网，将用户的访问指向离用户最近的工作正常的流媒体服务器上
公司没有，用别人的CDN链接，似乎安全检查的时候会提示有风险，可能会有不稳定的情况（不太推荐用）
9、使用通用样式
公用less，css选择器层级不要太深
二、速度层面
1、页面按需加载
2、缓存
- 通过HTTP的META设置expires和cache-control
<metahttp-equiv="Cache-Control"content="max-age=7200"/><metahttp-equiv="Expires"content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)"/>
- 通过nginx
3、渲染层面
CSS策略
- 避免出现超过三层的嵌套规则
- 避免为ID选择器添加多余选择器
- 避免使用标签选择器代替类选择器
- 避免使用通配选择器，只对目标节点声明规则
- 避免重复匹配重复定义，关注可继承属性 （font，text-align，color,line-height等）
DOM策略
- 缓存DOM计算属性
- 减少DOM节点
- 避免过多DOM操作
- 使用DOMFragment缓存批量化DOM操作
阻塞策略
- 脚本与DOM/其它脚本的依赖关系很强：对
回流重绘策略
- 缓存DOM计算属性
- 使用类合并样式，避免逐条改变样式
- 使用display控制DOM显隐，将DOM离线化
针对react
- 列表绑定key
- 不必要的dom节点用<></>
- 能不放到render里面的处理和声明都不要放
- 使用函数类型的组件
4、性能、体验
使用memoizeOne，减少计算。只要输入的内容和上一次一样，就不会再次计算，直接用上一次的结果。
防抖节流
5、去掉控制台打印
使用 transform-remove-console
6、使用http2
好处请看这里 http2.0
前提条件
1、openssl的版本必须在1.0.2e及以上，在 Chrome 51后，谷歌去掉了对 NPN 的支持，HTTP2不能用了会证书错误，而openssl1.0.2e之后的版本修复了此问题
2、开启https加密，目前http2.0只支持开启了https的网站
3、nginx的版本必须在1.9.5以上，原因是nginx从1.9.5开始，已经用 http_v2_module 模块替换了 ngx_http_spdy_module
详情
7、移动端做图片上传可以考虑先压缩图片
压缩图片插件 compressorjs
/**
* 压缩图片
* @param {*} image 图片文件
* @param {*} backType 返回类型，file文件，blob
* @param {*} quality 压缩质量0-1，数字越小图片被压缩得越小
* @returns
*/
compressorImage = (image, quality = 0.8, backType = 'file') => {
return new Promise((resolve, reject) => {
new Compressor(image, {
quality,
success(result) {
const file = new File([result], image.name, { type: image.type });
if (backType == 'blob') {
resolve(result);
} else {
resolve(file);
}
},
error(err) {
console.log('图片压缩失败---->>>>>', err);
reject(err);
},
});
});
};
三、其他
1、项目启动优化
webpack.config.js
使用缓存
memo.cache(true);
2、分析工具
npm run analyze
查看包的大小，将没用到的东西删掉。
使用lighthouse分析，谷歌浏览器有。
欢迎评论交流
❤️ 更多前端知识欢迎关注公众号交流
❤️ 这里有你想知道的web前端知识
名称：你想知道的web前端
版权归原作者 奋斗中的橘子 所有， 如有侵权，请联系我们删除。