Shopify CLI构建应用页面体积过高加载慢，如何调整配置优化？

预期性判定 #

裸应用5.78MB页面体积、40秒加载耗时不属于预期表现，问题根源为默认生成的项目webpack配置未做代码拆分、开发环境默认开启全量source map、公共依赖重复打包进app.js和页面入口js文件。

需调整的配置项 #

• 禁用开发环境冗余source map、配置代码拆分规则
  在项目根目录的next.config.js中更新配置如下：

module.exports = {
  productionBrowserSourceMaps: false,
  webpack: (config, { dev }) => {
    // 开发环境使用轻量source map
    if (dev) {
      config.devtool = 'eval-cheap-module-source-map'
    }
    // 拆分公共依赖，避免重复打包
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        common: {
          name: 'common',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    }
    return config
  }
}

• 开启tree shaking优化
  在package.json中添加sideEffects字段，无全局副作用代码可直接配置为：
  "sideEffects": false
  如果存在样式等需保留的副作用文件，调整为：
  "sideEffects": ["*.css", "*.scss"]
• 精简开发服务注入代码
  启动应用时使用命令：
  shopify app dev --no-logs
  减少运行时注入的调试代码体积。

效果验证 #

配置调整完成后重启开发服务，裸应用页面体积可降至300KB以内，本地加载耗时控制在2秒以内，组件重复打包问题同步解决。

内容的提问来源于stack exchange，提问作者Abhinav Singh