优化原因：之前自己的个人博客地址是放在google云的，emm...，实在太贵了，又转到了阿里云，一直以来都知道访问比较慢，想着是 qiang 的问题，就没管它，直到前几天我搬到阿里云之后一打开发现还是慢的一匹，所以就有了这次的优化

优化前：

下边的评分使用的是 speedpage，当然也可以使用chrome devtools => Lighthouse

具体使用可以参考这篇文档

stage1

查看都下载了些什么东西这么大，除去react-devtools和testing-library这两个插件的东西和埋点的代码，自己的也就两个js文件和两个css文件

使用webpack的分析工具很轻松就可以看到打包之后都有些什么

  webpack --analyze

可以看到moment的local非常大，而且我也没有用到，再有就是只有两个js文件，完全浪费了浏览器的性能

优化：

1. 优化moment

  + const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
  + new MomentLocalesPlugin(),

还有一些其他的webpack打包优化可以参考这篇文档，例如moment时区的优化，lodash的等

2. dll分包

        new webpack.DllReferencePlugin({
		
            manifest: path.resolve(__dirname, '../dll/manifest.json'),
		
        }),
		
        new AddAssetHtmlWebpackPlugin({
		
            filepath: path.resolve(__dirname, '../dll/vendor.js'),
		
            publicPath: '/dll',
		
        }),

webpack.dll.js

      module.exports = {
          mode: 'production',
          entry: {
              vendor: ['react', 'react-dom', 'react-router', 'react-router-dom'],
          },
          output: {
              filename: '[name].js',
              path: path.resolve(__dirname, '../dll'),
              library: '[name]_[hash:10]',
          },
          plugins: [
              new Webpack.DllPlugin({
                  name: '[name]_[hash:10]',
                  path: path.resolve(__dirname, '../dll/manifest.json'),
              }),
          ],
      };

3. 抽离moment，lodash

            cacheGroups: {
                lodash: {
                    test: /[\\/]node_modules[\\/]lodash/,
                    priority: 1,
                    reuseExistingChunk: true,
                },
                moment: {
                    test: /[\\/]node_modules[\\/]moment/,
                    priority: 1,
                    reuseExistingChunk: true,
                },
                // antd: {
                //     test: /[\\/]node_modules[\\/](antd)|(@ant-design\/icons).*/,
                //     priority: 1,
                //     reuseExistingChunk: true,
                // },
            },

ps：其实这里也想把antd抽离出去，但是发现这样写了之后antd的每个模块都被抽离成了一个单独的文件

4. 压缩banner

这里就不展示效果了，结果肯定好了很多，但是感觉仍不满意，原因主要是首屏加载了很多没用的代码，例如在后台使用的 antd-table、antd-menu、quilljs(大头)等等

stage2

路由懒加载，进一步拆分文件，尽量在首屏只加载有用的代码

      const FontLoader = loadable({
          loader: () => import('./pages/font/home/index'),
          loading: Loading,
      });
      
      
      const AdminLoader = loadable({
          loader: () => import('./pages/admin/layout/index'),
          loading: Loading,
      });
      const LoginLoader = loadable({
          loader: () => import('./pages/login/index'),
          loading: Loading,
      });

这里需要注意的一点是，此时网站加载速度比较快了，再使用一个比较大的loading的gif反而会导致速度变慢，屏幕会闪一下loading，所以这里给的是一个空的标签，给出了100vh 和 100vw的宽高(这样高度的原因是为了保持视觉稳定性-----得分，ps：正常情况下说的视觉稳定性指的是给img图片设置宽高)

stage3

再次查看性能指标，还有两项可以优化

增加 nginx 配置

# gzip 配置信息
# http://nginx.org/en/docs/http/ngx_http_gzip_module.html
# 开启 gzip 压缩
gzip on;
 # gzip 缓冲区 大小 使用默认值即可
#gzip_buffers 32 4k|16 8k;;
# gzip 压缩级别 级别越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大
gzip_comp_level 3;
# gzip 压缩文件大小(字节) 大于该值的文件都会被压缩
gzip_min_length 200;
# gzip 压缩文件类型 MIME类型 text/html 默认压缩
gzip_types application/javascript text/css image/jpeg;
# 设置 Vary 响应头
gzip_vary on;

使用webp格式图片并压缩

优化后

最后我变成了快男

个人的博客网站，搞着玩一下子，有什么不足欢迎大家指出，地址: www.sunbohao.com/

下一步打算搞个带有ssr功能的构建工具，搞成ssr的形式

优化我的网站

stage1

stage2

stage3

优化后