项目开发完成后,使用webpack打包的文件都比较大,所以我就想使用什么办法来优化一下。
本文主要是讲解在 vue-cli 中如何利用CDN实现打包文件体积优化问题。
如下图所示,是我整个项目打包后资源的分布,其中红色标注部分是占用体积最大的。一个显示的是图片资源,另一个显示的是js。
图片资源好说,这里主要讲解一下这个JS文件。我百度了一下这个vendor文件。然后根据提示,在config/webpack.prod.conf.js
文件下,有如下相关代码:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
// 翻译注释:所有被依赖的模块,如果它在node_modules目录中,都会被抽离出来放进 vendor.js 中
// 如果模块有一个路径,而且在路径中有 js 文件,并且这个模块是属于 node_modules 中的模块
// 那这个模块就会被抽离出来,放进名为 vendor 的这个