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

418 字

2 分钟

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

2023-07-24

前端

/

优化

分析工具#

站点分析工具#

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

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

代码分析工具#

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

webpack-bundle-analyzer #

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

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

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

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

    actions.setWebpackConfig(config);
  }
};