代码捆绑我很早就写了一些关于Javascript捆绑的帖子，人们可能认为我对应用捆绑很着迷，但我认为我无能为力，因为它非常有趣:-)。我写了几篇关于实现尽可能小的包的文章，我主要关注的是单文件包并尽量保持文件大小尽可能小。这方面的一个例子是我的Angular捆绑邮件。代码拆分这很好，直到有一天我遇到无法将整个应用程序作为单个文件下载的情况。有时您必须在应用程序中使用多个打包脚本。这是代码需要拆分的地方。通过将您的应用程序分解成多个部分，您可以根据用户当前的操作提供应用程序的相关部分。当谈到最小的单个包时，Webpack通常会处理文件大小，但这通常不是正确的时间。Rollup在这方面做得更好，但它对代码拆分的支持较弱。Webpack分块文件的总和会超过单个Rollup打包文件的大小，但这在你的应用程序中可能不是问题。如果把Webpack的生成和每个包都按需懒加载，用户最终下载的内容可能只是完整Rollup生成的包文件的一部分。最终，更小、更有针对性的软件包将比单个软件包更能让用户受益。当然，如果你的应用程序很少有延迟加载的机会，这些好处将不存在。启用代码拆分在以下部分中，我将展示如何以最简单的方式配置代码拆分。我会将代码拆分为两个应用程序包和一个包含通用代码的库包。这是源代码：car-service.jsimport{LoggerService}from'./logger-service';exportclassCarService{constructor(){this.logger=newLoggerService();}getCar(){this.logger.logMessage('上车');返回“宝马”；}}person-service.jsimport{LoggerService}from'./logger-service';exportclassPersonService{constructor(){this.logger=newLoggerService();}getPerson(){this.logger.logMessage('gettingperson');返回“乔·史密斯”；}}logger-service.jsexport类LoggerService{logMessage(msg){console.log(msg);}}CarService和PersonService会被拆分到两个不同的应用包中，公共的LoggerService会被抽取出来放到一个共享包中。配置我从一些开发人员那里听说Webpack很难配置。我想这也是很多人一般不选择使用Webpack进行打包的原因之一，而这也确实是Webpack存在的问题。新的术语和模块格式在开始时可能会有点麻烦，但我相信人们会很快克服它们。尤其是当人们意识到优化包装的优势时。Webpack的基本配置其实很简单。我的示例非常基础，您可以轻松扩展它以获得更高级的设置。webpack-config.jsvarpath=require('path');constwebpack=require('webpack');module.exports={条目：{人：'./src/code-splitting-webpack/person-service.js',car:'./src/code-splitting-webpack/car-service.js'},output:{filename:'[name].bundle.js',path:path.resolve(__dirname,'../../dist')},plugins:[newwebpack.optimize.CommonsChunkPlugin({name:'lib',minChunks:2,filename:'[name].js',})]}首先定义在我的配置条目中。person和entry.car，这些是我包裹的分割点。使用此配置，可以生成两个不同的应用程序包。包名称由[name].bundle.js规则生成，其中[name]是一个占位符，将被替换为“car”和“person”。如果配置到此结束，您将得到两个包含完整应用程序功能的包。这是因为在公共LoggerService的两个包中都会有一些重复。默认情况下，LoggerSerivce被添加到两个包中。CommonsChunkPlugin可以解决这个问题。它会告诉Webpack将所有bundle共享的公共代码拆分成第三个bundle。本例中的共享包非常简单，但您可能不想在共享包中包含所有重复代码。注意minChunks配置项，这个配置项允许你指定要包含在共享包中的代码需要被重用的最少次数。我把代码贴在了Github上，有兴趣的可以拿下来看看。该示例可以使用以下Webpack命令执行：webpack--configwebpack.config.js--progress如果您喜欢本文，请推荐给您的朋友。
