vue的vendor.js大，vuejs data

打包出来的chunk-vendors...js过大

new webpack.optimize.CommonsChunkPlugin(vendor， vendor.js)} } 这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。

gzip大小：vendors.js 143k umi.js 425k ~ 抽点时间再补充下 把修改的部分粘出来 有几点问题说明下：vendors 修改了test的验证范围，发现结果也没有很大变化，不知道是哪里除了问题，而且vendors包变的很小，umi包反而比较大。

vue 导入）；有一个模块 api.js 的入口点为 Hello.vue 以及 World.vue ；有一个模块 log.js 依赖了 Hello.vue 、 World.vue 和 index.html 。所以，这个例子中，会产生6个chunk，且 api.js 对应的 chunk 和 log.js 对应的 chunk 就是额外多出来的chunk。

相关问答

Q1: vue-cli项目中如何缩短首屏加载时间以提高效率

1、加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

2、减少打包体积、加快打包速度，常规的优化有以下两种：按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。

3、这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

4、尽可能保留改动文件前的状态（对input输入内容后，修改其他标签的代码）这在虽然两者相较于传统开发（手动F5）都提升了开发体验，但两者之间的依旧很大，尤其是当项目变得愈发复杂之后，我们必须一劳永逸的解决这个问题（留出更多的时间来开发bug）。

Q2: 详解Webpack如何引入CDN链接来优化编译后的体积

其实使用cdn就是在webpack热启动打包的时候动态插入脚本和样式链接。为了维护方便，我们在build/utils.js文件中增加了几个方法，以后可以在webpack.dev.conf.js和webpack.prod.conf.js上使用。如果没有build/utils.js，可以添加到其他文件中，只要后续步骤可以操作即可。

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。{ plugins： [new webpack.optimize.UglifyJsPlugin({ compress： { warnings： false } })]} 加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。另外，服务器端还可以开启 gzip 压缩，优化的效果更明显。

若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

编译 修改 .babelrc 文件 注意 ：使用插件 build 后没有 chunk files 文件。通过 DllPlugin 插件分离出第三方包 使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。需要注意 项目经过以上优化，打包从 30 分钟，到 2 分钟不到，整体还有优化空间，可以使用其他 cdn 等优化方式。

Q3: 如何解决使用vue打包时vendor文件过大或者是app.js文件很大的问题

1、使用“js压缩”工具可缩小体积，可百度搜索“js压缩”查找工具 把vendor.js代码ctrl + a全选，再ctrl + c复制，粘贴到js压缩工具里，点击“压缩”或“普通压缩”，然后再把压缩后的代码复制粘贴到vendor.js文件中。

2、为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。

3、你问的是vue打包后字体过大怎么办吗？这种情况解决办法如下：根据今日头条资料，使用相对单位：在样式表中使用相对单位（如em、rem、vw、vh）来定义字体大小，这样可以根据视口的大小来动态适配字体大小。

4、可能是内存空间不足，内存空间不足会导致内容太大而预览失败。这就是其主要原因之一，可以适当的清理内存，把不必要的删掉。

Q4: vue中怎么缩小appjs的大小?

1、使用flexbox布局：flexbox布局是一种css布局方式，可以使元素在不同屏幕尺寸下自适应排列，可以在vue组件中使用flexbox布局，以便在不同屏幕大小下调整元素的位置和大小。

2、在手指移动过程中针对每一次的两点距离进行比较。如果相对上次较大则放大，否则缩小。

3、检查CSS样式：确保右边栏的CSS样式正确设置，包括宽度、位置和浮动等属性。可能需要调整CSS样式以适应缩小后的布局。检查父容器的宽度：如果右边栏的父容器宽度没有正确设置或者存在其他布局问题，可能会导致右边栏缩小后出现空白。确保父容器的宽度能够适应缩小后的布局。

4、首先在option中的title下添加textStyle对象，在样式中写入。其次修改series中的label字体大小，在label添加normal对象。最后调整自己合适的大小确定即可。

Q5: webpack打包优化怎么做(提升webpack打包速度)

1、这样子，打包时间迅速降到200ms以内。 再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。从解析依赖的角度入手，我们可以bower install一些打包好的文件，然后通过设置别名让依赖指向这个文件，这样就减去了第三方库的依赖解析时间。

2、webpack 执行预处理文件时单线程的，我们可以使用 happypack 来多线程处理文件。修改 webpack.base.js 文件 babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译 修改 .babelrc 文件 注意 ：使用插件 build 后没有 chunk files 文件。

3、resolve.alias文档地址 https：//doc.webpack-china.org/configuration/resolve/#resolve-alias创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：不过经过自己的实践最后三点是对自己项目优化最大的。

4、减少打包体积、加快打包速度，常规的优化有以下两种：按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。

5、当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。Webpack 的核心概念是 module，可以认为 Webpack 对资源的路径解析、读入、转译、分析、打包输出，所有操作都是围绕着 module 展开的。

vue的vendor.js大的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vuejs data、vue的vendor.js大的信息别忘了在本站进行查找喔。