Angular中使用Highcharts动态导入未产生额外块
在Angular中使用Highcharts动态导入时，可能会发现没有产生额外的块。这是因为Angular CLI在打包时默认会对所有导入的模块进行静态分析并将它们打包到一个单独的vendor.js文件中，而不会产生额外的代码块。解决方法是修改webpack config文件，使其支持Webpack的代码分割功能。这样，就可以通过动态导入Highcharts模块来产生额外的代码块。
示例代码：
- 在angular.json中指定extra-webpack-config选项
"architect": { "build": { "options": { "extra-webpack-config": "webpack.config.js" } } }
- 创建一个webpack.config.js文件并配置：
const webpack = require('webpack');
module.exports = { entry: { app: './src/main.ts', highcharts: ['highcharts', 'highcharts/modules/exporting'] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'highcharts', filename: 'highcharts.bundle.js' }) ] };
这将创建一个名为highcharts.bundle.js的代码块，并将highcharts模块和exporting模块打包到其中。在代码中使用动态导入来加载高级图表模块，即可将这部分代码打包到高级图表块中。
import('highcharts/highcharts').then(Highcharts => { //使用Highcharts对象 });
注意，为了使代码分离生效，您需要在tsconfig.json文件中将module设置为es2015或更高版本。
"module": "es2015"