前端性能优化总结

1.webpack 优化方式

去掉无用文件

插件：useless-files-webpack-plugin

去掉无用js 代码

Tree Shaking是一种优化技术，它可以从打包后的代码中删除未使用的JavaScript代码，以减少输出文件的大小。这需要使用ES6模块系统（即使用import和export语句）和一个支持Tree Shaking的JavaScript编译器（如Babel）

//在Webpack配置中开启mode为production，则可以自动开启Tree Shaking功能。
module.exports = {
  mode: 'production',
  // ...其他配置
};

去掉无用css

使用插件：purifycss-webpack 去除未使用的CSS代码,或者 MiniCssExtractPlugin插件

const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new PurifyCSSPlugin({
      paths: ['path/to/your/views'] // 用于匹配HTML文件的路径，插件将检测这些文件中使用的CSS类名
    }),
  ],
};

去掉生产console

使用插件：terser-webpack-plugin

配置如下

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  // ...其他配置
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 去除console语句
        },
      },
    })],
  },
  // ...其他配置
};

压缩代码

使用Webpack的mode配置为production，它也会自动开启代码压缩，包括JavaScript、CSS和HTML

代码分割

通过Webpack的代码分割功能，将代码划分成更小的代码块（chunks）。这样，当用户访问不同页面时，只会加载所需的代码块，而不是一次性加载整个应用程序的所有代码，配置如下。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  // ...其他配置
};

图片优化

使用url-loader或file-loader来处理图片，并设置合适的limit值，将较小的图片转换成Base64格式，减少HTTP请求，或者将较大的图片输出为单独的文件，以便在需要时进行异步加载

使用缓存

配置Webpack的输出文件名使用[contenthash]，这将根据文件内容生成hash值。当文件内容发生变化时，Webpack会生成不同的文件名，这可以帮助利用浏览器缓存，只加载更改过的文件，而不是全部文件，配置如下

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
  // ...其他配置
};

使用webpack-bundle-analyzer分析包大小

使用webpack-bundle-analyzer插件可以可视化地分析打包后的文件大小，找出哪些模块或资源占用了较大的空间，帮助你进一步优化代码和资源

2.其他优化方式

chrome的perferance 分析

减少http请求次数。

懒加载

例如：延迟加载非首屏内容，如图片、视频和其他资源，使得页面在初始加载时更快显示，并在用户滚动到相应区域时再加载这些内容

组件懒加载，路由懒加载

使用<link rel="preload">标签预加载一些重要资源，以加快后续页面的加载速度

引用 min.js 库

在node_modules 每个里面一般会有 一个 .min.js的文件，如果有直接引用这个文件。

替换体积更小的库。

如用day.js 替换moment.js

使用CDN

将第三方依赖库（例如React、Vue等）和 静态资源（如CSS、JavaScript和图片）通过CDN引入，可以减小打包后的文件大小，并利用CDN的缓存加速加载速度。

使用缓存技术：使用LocalStorage或SessionStorage来缓存一些数据，避免频繁的网络请求

缓存策略：设置适当的缓存头（Cache-Control和Expires），使得资源能够被有效地缓存，从而减少重复加载。

关于图片资源具体优化：

1. 压缩图片大小： 使用图像压缩工具，如ImageOptim、TinyPNG、Squoosh等，对图片进行压缩，以减小文件大小。确保在保持足够质量的前提下，尽量减小图片文件的体积。

2. 使用合适的图片格式： 选择合适的图片格式对于优化图片至关重要。通常有以下常用的图片格式：

   • JPEG：适用于照片和大色块的图片，可以设置图片质量，但不支持透明度。
   • PNG：适用于透明图片和图标，支持透明度，但文件大小较大。
   • WebP：适用于现代浏览器，具有更好的压缩效率和支持透明度。

   根据图片内容和需求，选择合适的格式，以获得最佳的压缩效果。

3. 响应式图片： 对于响应式网页设计，使用<picture>元素或CSS的background-image属性配合媒体查询，为不同的屏幕尺寸提供不同大小的图片，减少不必要的图片加载。

4. 使用矢量图： 对于简单的图标和图形，使用SVG（可缩放矢量图形）格式，它可以无损缩放，并且文件大小较小。

5. 懒加载图片： 将不在视窗中的图片设为懒加载，当用户滚动到图片位置时再加载图片。这样可以节省初始加载时的带宽，提高页面加载速度。

6. 图片预加载： 对于下一页可能需要用到的图片，使用<link rel="preload">标签进行预加载，以提前缓存这些图片，使得用户在导航时能够快速加载。

7. 使用CDN： 将图片资源放置在CDN上，以便更快地传输和加载图片，减轻服务器负担。

8. 缓存控制： 设置合适的缓存头（Cache-Control和Expires）来指定图片缓存策略，使得浏览器可以正确缓存图片，减少重复加载。

9. 在webpack 里使用url-loader或file-loader来处理图片，并设置合适的limit值，将较小的图片转换成Base64格式，减少HTTP请求，或者将较大的图片输出为单独的文件，以便在需要时进行异步加载