如何将Angular 5项目的vendor.js拆分为多个代码块？

当然可以解决这个问题！针对你用Angular 5 + Angular CLI开发的场景，咱们可以通过导出Webpack配置并调整公共代码拆分规则，把体积庞大的vendor.js拆分成多个小代码块，既优化首次加载速度，还能利用浏览器缓存提升后续访问体验。下面是具体操作步骤：

1. 导出Webpack配置文件 #

Angular CLI默认隐藏了Webpack的底层配置，所以第一步得把配置文件导出来：

ng eject --prod

执行这个命令后，项目根目录会生成webpack.config.js，同时package.json里的构建脚本会更新——后续构建就需要用npm run build代替原来的ng build命令了。

2. 配置CommonsChunkPlugin拆分规则（Webpack 3.x） #

Angular 5对应的Webpack版本是3.x，它靠CommonsChunkPlugin来拆分公共代码。打开生成的webpack.config.js，找到plugins数组，替换原有的CommonsChunkPlugin配置，这里有两种常用的拆分方式：

方式1：手动按库类别精准拆分 #

这种方式可以把不同类别的第三方库分开打包，比如把Angular核心模块、RxJS、其他工具库各自拆成独立文件，方便浏览器缓存：

// 在webpack.config.js的plugins数组中添加以下配置
new webpack.optimize.CommonsChunkPlugin({
  name: 'angular-core', // 专门放Angular核心模块
  minChunks: (module) => module.context && module.context.includes('@angular')
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'rxjs-lib', // 专门放RxJS相关代码
  minChunks: (module) => module.context && module.context.includes('rxjs')
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'other-vendors', // 放剩下的第三方库
  minChunks: (module) => module.context && module.context.includes('node_modules') 
                        && !module.context.includes('@angular') 
                        && !module.context.includes('rxjs')
}),
// 别忘了加上runtime代码块，它负责模块加载的逻辑，体积很小
new webpack.optimize.CommonsChunkPlugin({
  name: 'runtime',
  minChunks: Infinity
})

方式2：自动按文件大小拆分 #

如果不想手动分类，也可以设置一个体积阈值，让Webpack自动把超过阈值的模块拆成独立代码块：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: (module) => module.context && module.context.includes('node_modules'),
  minSize: 30000 // 单位是字节，这里设置为30KB，超过这个大小的模块会被单独拆分
})

3. 更新HtmlWebpackPlugin确保代码块注入 #

修改完拆分规则后，得让新生成的代码块都被正确注入到index.html里。找到HtmlWebpackPlugin的配置，更新chunks数组：

new HtmlWebpackPlugin({
  // 这里保留你原有的template、filename等配置
  chunks: ['polyfills', 'runtime', 'angular-core', 'rxjs-lib', 'other-vendors', 'main'],
  chunksSortMode: 'manual' // 按指定顺序注入，避免加载顺序出错
})

如果用的是自动拆分方式，把chunks里的对应名称改成你设置的vendor相关即可。

4. 执行生产构建 #

现在用更新后的配置执行构建：

npm run build

去dist目录看看，你会发现原来的单个vendor.js已经变成了多个体积更小的代码块啦！

额外优化小技巧 #

• 开启服务器端Gzip压缩：不管是Nginx还是Apache，开启Gzip后能把传输的文件体积压缩到原来的30%左右，加载速度会快很多。
• 用bundle分析工具排查：可以安装webpack-bundle-analyzer，它能可视化展示每个代码块的组成，帮你找到那些体积超大的依赖，看看有没有可以替换或者移除的。
• 利用浏览器缓存：拆分后的代码块如果没有更新，浏览器会直接读取本地缓存，不用重复下载，这对用户后续访问的体验提升很明显。

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