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做分包 我...
经过分析发现：vuevue-routeraxios是真正公共的代码。因此，如果我可以把这三个依赖打包成一个单独的vendors-base.js；控制台其余的依赖打包入vendors-console.js；剩余的依赖打包入chunk-vendors.js就好了。//vue.config.js...pages:{console:{entry:'src/main.js',template:'public/console.html',...
1.背景 首次加载vue网页,chunk-vendors.js文件太大 ,加载十分缓慢,加上网络时快时慢,需要销毁将近一分钟才加载完。。。 2.解决 配置webpack拆分插件打包,在vue.config.js 文件了加上 // 配置webpack,拆分插件脚本 configureWebpack:
一、chunk-vendors.js简介 顾名思义,chunk-vendors.js是捆绑所有不是自己的模块,而是来自其他方的模块的捆绑包,它们称为第三方模块或供应商模块。 通常,它意味着(仅和)来自项目/node_modules目录的所有模块,会将所有/node_modules中的第三方包打包到chunk-vendors.js中。
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。// 在vue-config.js 中加入...module.exports={...// 配置webpackconfigureWebpack:confi...
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...
根据主篇内容继续通过compression-webpack-plugin插件处理chunk-vendors.js文件过大的问题。 创建vue.config.js 文件,后续配置都需要用到配置文件。 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度,浏览器可以直接解析.gz文件并解压。