<h4>通常项目配置router的懒加载，基于webpack4+和ES6，最简单的写法是</h4><p><br></p><pre class="ql-syntax" spellcheck="false">const routers = [{ path: '/xxx', name: 'xxx', component: () =&gt; import('@/xx/xxx.vue') // import()的动态引入 }] </pre><p><br></p><p><span style="color:rgb(64, 64, 64);">此时文件加载按页面引入，每个页面跳转进加载该页面需要的资源</span></p><p><br></p><h4>prefetch预加载使首屏加载变慢</h4><p><br></p><p><span style="color:rgb(64, 64, 64);">在vue-cli3升级之后，配置了webpack的预加载，这时候除了路由懒加载需要的当前页面资源，其他资源也会被请求，但不会被解析</span></p><p><br></p><p><span style="color:rgb(64, 64, 64);">由于预加载文件比较多，反而阻塞了实际需要的文件下载，首页渲染速度变慢。</span></p><p><br></p><h4><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2Fhtml-and-static-assets.html%23preload" rel="noopener noreferrer" target="_blank" style="background-color:transparent; color:rgb(6, 129, 208);">解决方法</a></h4><p><br></p><pre class="ql-syntax" spellcheck="false">// vue.config.js module.exports = { chainWebpack: config =&gt; { // 移除 prefetch 插件 config.plugins.delete('prefetch') // 或者 // 修改它的选项： config.plugin('prefetch').tap(options =&gt; { options[0].fileBlacklist = options[0].fileBlacklist || [] options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/) return options }) } } </pre><p><br></p>