项目优化措施全面总结

一、体积层面

1、 图片压缩

这个网站压缩的图片肉眼看不出变化，不会变模糊 压缩图片网址 https://tinypng.com/

2、图片选择

PC端图片大小与实际大小一致

移动端图片用2倍图

3、 Gzip压缩代码

（准备将配置加入到脚手架，推荐此方法，效果比较明显）

下载依赖

npm i compression-webpack-plugin@5.0.1 –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 }
 */
const webpackConfig = (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

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-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前端