npm run build 打包完成后,检查dist目录下的文件,你应该会看到除了chunk-vendors.js之外,还生成了一些其他文件,这些文件包含了之前拆分出来的第三方库。 通过以上步骤,你应该能够成功地拆分chunk-vendors.js文件,从而优化你的Vue项目的加载性能。
// 看这里:把chunk-vendors.js进行分包,提升资源加载速度,很有必要 optimization: { /** * runtimeChunk可选值有:true或'multiple'或'single' * true或'multiple'会有每个入口对应的chunk。不过一般情况下 * 考虑到要模块初始化,设置为single就够多数情况下使用啦。 * 详情见官网:https://webpack.docschina....
chunk-vendors.js,顾名思义chunk(块/包)-vendors(供应商),即为:不是自己写的模块包,也就是/node_modules项目目录的所有模块包。所以这个chunk-vendors.js文件大的原因其实就是,我们把第三方的包都打包在这一个文件上了,都糅在一块,肯定大啊,所以想办法把其做一个拆分。 2.使用optimization.splitChunks做分包 ...
chunk-vendors.js,顾名思义chunk(块/包)-vendors(供应商),即为:不是自己写的模块包,也就是/node_modules项目目录的所有模块包。所以这个chunk-vendors.js文件大的原因其实就是,我们把第三方的包都打包在这一个文件上了,都糅在一块,肯定大啊,所以想办法把其做一个拆分。 使用optimization.splitChunks做分包 我...
1.背景 首次加载vue网页,chunk-vendors.js文件太大 ,加载十分缓慢,加上网络时快时慢,需要销毁将近一分钟才加载完。。。 2.解决 配置webpack拆分插件打包,在vue.config.js 文件了加上 // 配置webpack,拆分插件脚本 configureWebpack:
简介:Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案 一、chunk-vendors.js简介 顾名思义,chunk-vendors.js是捆绑所有不是自己的模块,而是来自其他方的模块的捆绑包,它们称为第三方模块或供应商模块。 通常,它意味着(仅和)来自项目/node_modules目录的所有模块,会将所有/node_modules中的第三方包打...
经过分析发现：vuevue-routeraxios是真正公共的代码。因此，如果我可以把这三个依赖打包成一个单独的vendors-base.js；控制台其余的依赖打包入vendors-console.js；剩余的依赖打包入chunk-vendors.js就好了。//vue.config.js...pages:{console:{entry:'src/main.js',template:'public/console.html',...
vue-cli4搭建 的 Vue2项目,在 vue.config.js 中有如下分包相关配置: chainWebpack(config) { config.optimization.splitChunks({ chunks: 'all', cacheGroups: { vendors: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' }, common: { name: 'chunk...
all: 把动态和非动态模块同时进行优化打包;所有模块都扔到 vendors.bundle.js 里面 initial: 把非动态模块打包进 vendor,动态模块优化打包 async: 把动态模块打包进 vendor,非动态模块保持原样(不优化) 结合图2-bundle分布图分析修改splitchunk配置: // 修改后配置splitChunks:{chunks:'all',cacheGroups:{libs:{name...
根据主篇内容继续通过compression-webpack-plugin插件处理chunk-vendors.js文件过大的问题。 创建vue.config.js 文件,后续配置都需要用到配置文件。 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度,浏览器可以直接解析.gz文件并解压。