@next/bundle-analyzer的使用

Lighthouse打分的时候提示说要减少没用的js，然后就用了下@next/bundle-analyzer，记录下过程。

• 安装

  yarn add -D @next/bundle-analyzer

• 配置next.config.js

  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  
  const nextConfig = {
    ...
  };
  
  module.exports = withBundleAnalyzer(nextConfig);

• 方便以后使用，将"bundle-analyzer": "ANALYZE=true next build"添加到package.json里。

• yarn run bundle-analyzer执行

最大的一块区域如下所示，也就是接下来要先处理的，看到主要是打包了很多cjs/styles/hljs下没有用到的style。

import {github} from 'react-syntax-highlighter/dist/cjs/styles/hljs';

改成下面这种：

import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';

再跑一下yarn run bundle-analyzer就没有上面那块区域了，Lighthouse分数也上去了。