9.6 多页面抽离公共代码, 第三方代码抽离

这一节的代码位于 09_optimisation/9_6_muti_page_common webpack 3版本的配置为commonChunkPlugins, 4版本为splitchunks

当项目是多页面有多个入口, 引入相同部分的代码时, 会重复打包, 此时可以将重复部分提取出来

多页面的公共代码抽离

• 首先配置一个多页入口, 查看之前的文档 https://www.yuque.com/tokido/inza6t/yvs2pg
• 并在每个入口同时引用相同的文件:
• 
• 运行打包命令, npm run build 查看打包文件
• 
• 可以发现两个入口文件都重复打包了公共代码
• 配置webpack抽离这些公共代码
• 文档: https://webpack.js.org/plugins/split-chunks-plugin/#root
• 
• 运行打包命令, 可以发现生成了公共的代码文件,并且两个入口文件使用了公共代码
• 

第三方代码抽离

如果使用了第三方代码, 并且想单独抽离, 可以继续在上面中加入配置, 这里仍然使用jquery为例

• 配置webpack:
• 
• 此时打包就生成了对第三方模块的单独打包代码文件
•