Angular项目动态导入Highcharts未生成独立chunk问题如何解决？

• 导入路径格式错误
  你当前写的导入路径带了尾部斜杠'highcharts/'，webpack会将其识别为目录导入，和项目中可能存在的'highcharts'（无斜杠）导入判定为同一个模块，但你的chunk命名配置仅作用于带斜杠的导入规则，最终导致模块被合并到主包。
  修复方法：去掉尾部斜杠，修改为：

import(/* webpackChunkName: "highcharts" */ 'highcharts').then(
    (module) => {
        console.log(module.default);
    }
)

• 存在其他静态导入引用
  只要项目任意位置存在import * as Highcharts from 'highcharts'这类静态导入语句，webpack就会直接将Highcharts打包进主chunk，动态导入的分包规则不会生效。全局检索项目中所有导入Highcharts的代码，删除所有静态导入，统一使用动态导入调用即可。
• Angular CLI打包配置未开启命名chunk
  Angular 12默认不会保留自定义的chunk命名，需要在angular.json对应项目的build配置中开启如下参数：

{
  "architect": {
    "build": {
      "options": {
        "namedChunks": true,
        "vendorChunk": true
      }
    }
  }
}

如果需要更精准的分包控制，可以安装@angular-builders/custom-webpack扩展打包配置，添加自定义splitChunks规则强制拆分Highcharts：

// 自定义webpack配置文件
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        highcharts: {
          test: /[\\/]node_modules[\\/]highcharts[\\/]/,
          name: 'highcharts',
          chunks: 'async',
          priority: 10
        }
      }
    }
  }
}

• 小语法问题提示
  你提供的示例代码中console.log(module.default):末尾是冒号，需要修改为分号，否则运行时会抛出语法错误。

内容的提问来源于stack exchange，提问作者Denis Tatina