gzip_vary off; 这样的异步 script 标签注入到生成的 html 的 head 标签内。这会导致它先于 app.js , vendor.js , manifest.js （位于 body 底部）执行。（ async 只是不会阻塞后面的 DOM 解析，这并不意味这它最后执行）。而且当这些 js 加载完毕后，又会在 head 标签重复创建这个异步的 script 标签。虽然这个报错不会对程序造成影响，但是最好的方式，还是不要把这些异步组件直接渲染到最终的 html 中。好在 prerender-spa-plugin 提供了 postProcess 选项，可以在真正生成 html 文件之前做一次处理，这里我使用一个简单的正则表达式，将这些异步的 script 标签剔除。本分支已经使用了 /,'') ，并正确挂载。
const app = new Vue({
// ...
})
document.addEventListener('DOMContentLoaded', function () {
app.$mount('#app')
})
总结
虽然官方的脚手架已经提供很多开箱即用的优化，比如 css 压缩合并， js 压缩与模块化，小图片转 base64 等等，但我们能做的还很多。我没有提及代码级别的优化细节，也是希望给大家提供一些可实践的方案。上述三种方案或多或少都会给你项目带来一些收益。优化也是一门玄学，可研究的东西很多。也希望其他小伙伴可以在评论区提供宝贵意见，好的方案我会采纳并整理。
对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料
知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！
分享到:
閱讀更多 前端全棧架構丶 的文章
