原因是这样的。最近，我有相当一部分的精力投入到了项目的性能优化上。在一个项目中有一个长期存在的问题，我一直在努力解决这个问题。一直没时间看，就一起解决了一次。问题很简单：我用vue-cli创建的项目是按照vue的route的懒加载方式写的。打包后发现代码没有分流，全部打包到app.js中，导致app.js过大，按需加载没有路由。查明问题原因后，开始认为问题的原因可能是以下几点：路由懒加载不正确；vue-cli版本问题；vue-cli配置问题。但是这三种可能的原因很快就被排除了，因为有一个项目上面三者是一样的，而且代码划分是正常的，只能是代码问题。但是有这么多文件，不可能查看所有文件。没有头绪，只能用简单实用的二分法来定位问题文件。费了九牛二虎之力，终于找到了两个罪魁祸首。通过观察这两个文件，我发现它们都使用了相同的文件引用方式。类似的代码如下：letform=null;letcpnName=this.template.name;this.$options.components[cpnName]=require('@/'+this.template.path).default;form=
{form}
)组件是拼接输入的，其实看到这里我大概就知道原因了。因为是动态路径，webpack打包的时候静态解析依赖，无法确认文件的具体地址，所以代码全部打到app.js。为了证明我的想法，在webpack的githubissue中发现了一个和我类似的场景：这位老哥想根据传入的图片名称动态导入图片，但是打包的时候发现其他目录下的图片也被打包进来了，webpack的maintainer也回复了，这是require的工作机制，它不知道你会用到哪个资源，它都打包了。验证问题为了验证这个问题，我创建了一个项目来重现问题：动态导入的组件代码如下：//src/components/common/DynamicRequireCpn.vue路由代码如下：//src/router/index.jsconstroutes=[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',component:()=>import(/*webpackChunkName:"about"*/'../views/AboutView.vue')}];打包结果如下：发现代码还是打包在一起的，about组件没有分开。而且我还在app.js中找到了没有引用的代码。也就是说，在这种情况下，webpack会打包src目录下的所有文件。问题的解决根据上面的实验和require的工作原理，不知是否可以通过缩小require的搜索范围来解决问题？现在我把require的动态路径精确到@/components/common/，重新打包看看：Bingo！看了about组件对应的split文件，搜索了app.js文件，没有发现未引用的代码。问题已经解决了！综上所述，在使用webpack时，应该尽量减少资源的动态路径导入。如果一定要用这种方式导入，也应该尝试导入一个较短的文件路径，或者将要动态导入的文件放在一个目录下，防止webpack找到非目标。下面的目录。好的require('@/components/common/'+this.template.path);BADrequire('@'+this.template.path);