在Vue项目中,chunk-vendors.js过大通常是由于项目依赖的第三方库(如Vue本身、Vuex、Vue Router、UI框架等)的打包结果导致的。这个文件包含了所有通过npm或yarn安装的node_modules中的代码,这些代码被Webpack打包成一个单独的文件以提高加载效率。然而,当这些第三方库变得庞大时,chunk-vendors.js的体积也会相应增加,影...
将所有的第三方包集中到一个文件,自然也会出现文件过大的问题。 二、chunk-vendors.js文件大小分析 新创建一个vue项目,通过打包之后运行到服务器,然后访问得到chunk-vendors.js为182 B 通过安装第三方组件,将chunk-vendors.js文件增大,安装第三方组件之后需要在main.js中导入,重新运行npm run build进行打包。 npm ...
根据主篇内容继续通过compression-webpack-plugin插件处理chunk-vendors.js文件过大的问题。 创建vue.config.js 文件,后续配置都需要用到配置文件。 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度,浏览器可以直接解析.gz文件并解压。 压缩文件格式介绍 .gz:浏览器...
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。// 在vue-config.js 中加入...module.exports={...// 配置webpackconfigureWebpack:confi...
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。 // 在vue-config.js 中加入 ...
0、compression-webpack-plugin - npm 1、记一次vue-cli 3.0 build包太大导致首屏过长的解决方案 - 风吹麦浪打 - 2、Vue 打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)_卡尔特斯的博客-C_vue打包js文件过大...
vue页⾯加载慢，chunk-vendors.js⽂件太⼤今天拉取合并了同事的代码后页⾯加载速度变得⾮常慢，经过排查发现是因为加载的chunk-vendors.js太⼤ 58m 28s就很离谱 经过同事指导加上百度终于找到解决办法，配置compression-webpack-plugin实现Gzip压缩 安装compression-webpack-plugin：yarn add compression-web...
今天拉取合并了同事的代码后页面加载速度变得非常慢,经过排查发现是因为加载的chunk-vendors.js太大 58m 28s就很离谱 经过同事指导加上百度终于找到解决办法,配置compression-webpack-plugin实现Gzip压缩 安装compression-webpack-plugin:yarn add compression-webpack-plugin@5.0.1 ...
通过以上处理,在网页访问时,chunk-vendors.js 显示为2.3M,加载还是需要2秒左右,还是不太能接受。 于是需要进一步查询项目还有哪些无用的大文件依赖,于是通过以下方法来定位大依赖: 通过webpack-bundle-analyzer插件来分析依赖,该插件可以很清晰的看清楚chunk-vendors.js中包含了哪些依赖和哪些依赖是很大的,然后进一步分...
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。// 在vue-config.js 中加入...module.exports= { .....