在Vue打包后,HTML文件中引入的JavaScript文件都会被打包成一个或多个JavaScript文件。其中包含了Vue的源代码以及我们自己写的JavaScript代码。在这些JavaScript文件中,一些常见的文件类型需要注意:
vendor.xxxxxxxx.js // 第三方库和插件 app.xxxxxxxx.js // 自己项目的JavaScript代码 manifest.xxxxxxxx.js // webpack打包工具的运行时代码
其中vendor.xxxxxxxx.js包含了第三方库和插件的源代码。为了优化加载速度,Vue CLI会将第三方库和插件打包到一个vendor.xxxxxxxx.js文件中,并缓存起来,以便其他页面也可以重复使用。这样做的好处是减少了每个页面的文件请求数量,加快页面加载速度。
在一个典型的Vue项目中,app.xxxxxxxx.js文件可能是最大的一个文件。它包含了我们自己写的JavaScript代码,包括Vue组件等等。这个文件通常不会缓存,所以每次刷新页面都会重新请求该文件,这意味着该文件对于页面加载时间的影响很大。
manifest.xxxxxxxx.js则是webpack打包工具的运行时代码。这个文件非常小,只包含了webpack打包工具的配置信息等必备的代码。在每次打包时,webpack会将真正的JavaScript代码与这个manifest.xxxxxxxx.js文件组合在一起。使用manifest的好处是,每次打包时无论骑士包括哪些代码,manifest.xxxxxxxx.js总是不会变。这意味着如果我们的代码发生变化,webpack只会重新生成app.xxxxxxxx.js文件,而不会更新manifest.xxxxxxxx.js文件。这样做可以最大限度地提高网站的缓存效率。
最终,在打包完成后我们可以将这几个JavaScript文件放在CDN上以更好的加快网站的访问速度。