前端项目首屏加载优化--页面初始进来加载速度慢的解决方案

首屏加载优化–页面初始进来加载速度慢的解决方案

1、 Nginx开启gzip静态资源压缩

编辑nginx配置文件 nginx.conf 找到如下代码并更改如下：

gzip on; # 开启压缩
gzip_min_length 1k; # 设置压缩最小单位，小于不压缩
#gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
gzip_comp_level 4; # 压缩比
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 压缩内容

2、Webpack配置代码分割

webpack给出了智能分割代码的功能：splitChunks，可以用给定的策略去抽取公共代码，避免重复。详细的可以看webpack的官方文档（https://webpack.docschina.org/guides/code-splitting/#splitchunksplugin），提供了详细的配置！

/**
 * 分割打包代码，防止重复打包以及打包大小过大
 */
module.exports = function (config) {
  config.merge({
    optimization: {
      minimize: true,
      splitChunks: {
        chunks: 'all',
        minSize: 10,
        minChunks: 1,
        automaticNameDelimiter: '.',
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](@ant-design|moment)[\\/]/,
            priority: 13
          },
          'brace-index': {
            name: 'brace-index',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](brace)[\\/]index.js/,
            priority: 12
          },
          'axios': {
            name: 'axios',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](axios)[\\/]/,
            priority: 12
          },
          'ant-design-vue': {
            name: 'ant-design-vue',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](ant-design-vue)[\\/]/,
            priority: 12
          },
          common: {
            minChunks: 2,
            priority: 10,
            chunks: 'all',
            reuseExistingChunk: true
          }
        }
      }
    }
  })
}

3、 按需加载

1. 按需引入所需第三方依赖，而不是全量注册，全量注册会导致打包的时候，将多余的代码一起打包到项目中，造成文件过大！
2. 异步路由（路由懒加载），通过异步组件加载方式，按需加载当前路由所需的文件！
3. 去除没用的依赖；避免类似作用的多种依赖包使用，例如使用了Element UI又使用Antd、同时使用了less和scss，类似的第三方依赖起到的作用是一样的，引入进来可能你觉得很方便，但是如果都使用了，到最后开发越来越多，不仅仅打包体积大和慢，跑起来开发更加慢，严重影响开发效率！

4、尽量功能开发减少代码量

1. 公共方法封装： 类似的处理逻辑等代码应该封装成公共方法调用，重复使用。
2. 抽离公共的组件。

5、 前端的资源动态加载

a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。

6、Webpack引入CDN资源

配置webpack的externals，如下：

使用CDN资源的好处：减少打包的体积，配置的资源加载更快！