项目优化：分析、目标、策略

418 字

2 分钟

项目优化：分析、目标、策略

2023-07-24

前端

/

优化

分析工具#

站点分析工具#

用于分析与评估网站的性能、无障碍与 SEO 等方面的表现，并提供评分报告与优化建议。

两者在功能表现方面基本一致，其中 Chrome Lighthouse 多次评分的结果相对稳定，而 PageSpeed Insights 多次评分的结果起伏差距较大（尤其是移动端，它会模拟弱网环境）。

代码分析工具#

用于分析源代码中的依赖关系、包体积大小与是否存在冗余依赖等问题。

webpack-bundle-analyzer #

1
# 安装依赖
2
$ yarn add -D webpack-bundle-analyzer

1
/**
2
 * @file gatsby-node.js
3
 * @note 其它框架的配置请参考对应的文档
4
 *
5
 * @description 以下是适用于 gatsby 项目的配置，分析结果默认输出地址：public/report.html
6
 */
7

8
/** @type {(config: WebpackConfiguration) => WebpackConfiguration} */
9
const defineWebpackConfig = (config) => config;
10

11
/** @type {(args: import("gatsby").CreateWebpackConfigArgs) => void} */
12
exports.onCreateWebpackConfig = ({ stage, actions }) => {
13
  if (stage === "build-javascript") {
14
    const config = defineWebpackConfig({
15
      plugins: [
16
        new BundleAnalyzerPlugin({
17
          analyzerMode: "static" /* 输出 html 可视化文件 */,
18
        }),
19
      ],
20
    });
21

22
    actions.setWebpackConfig(config);
23
  }
24
};