解决vue打包后vendor.js文件过大问题

第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包，如下图：

第二步、在使用vue等包的地方，注释掉import引入

在所有使用vue的地方注释掉引入的vue等包，但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用，除了Vue.use(ElementUI), 如果加上这句话，还是会打包element-ui到vendor.js文件中

在main.js

在store文件加中的index.js

在api/request.js文件中

在router/index.js文件中

第三步、打包忽视掉vue等包

在webpack.base.conf.js

第四步、如果打包后的文件还是比较大，就采用路由懒加载的方式加载路由

最终打包结果

vendor.js的大小由原来的988k, 降到235k

总结

以上所述是小编给大家介绍的解决vue打包后vendor.js文件过大问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed. 报错截图 问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token < 报错截图: 经过一番折腾,初步定位问题1

  • 使用webpack打包后的vue项目如何正确运行（express）

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行. (1).安装express-generator生成器. npm install express-generator -g // 也可使用cnpm比较快 (2).创建一个express项目. express exp

  • vue-cli3环境变量与分环境打包的方法示例

    第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 环境变量文件只包含环境变量的"键=值"对: FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • 详解vue-cli3多环境打包配置

    最近下载了vue-cli3,研究了下vue-cli3下多环境的配置. 首先,安装vue-cli3. npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录. 配置文件需要自己写一个vue.config.js,可以参考官方文档文档写,网址 https://cli.vuejs.org/zh/config/ 现在说重点,怎么配置多环境.打开package.j

  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题. 解决方案 像vue.axios.element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中. 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发

  • 解决vue打包后vendor.js文件过大问题

    第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js

  • vue中的vendor.js文件过大问题及解决

    vue中的vendor.js文件过大问题及解决

    目录 vue vendor.js文件过大问题 1. cdn 引入 2. 在使用vue等包的地方,注释掉import引入 3. 打包忽视掉vue等包 vue打包降低vendors.js文件大小 vue打包项目优化 vue vendor.js文件过大问题 1. cdn 引入 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/

  • 如何解决uni-app编译后 vendor.js 文件过大

    目录 uni-app编译后vendor.js文件过大 前景 运行后发现 小程序分包后vendor还是过大 添加以下代码 uni-app编译后vendor.js文件过大 前景 采用uni-app开发的微信小程序,发布时工具提示vendor.js过大,已经跳过es6向es5转换.查看后发现编译后代码中common/vendor.js已超过500k,所以需要体积控制. HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 使用cli创建的项目,可以在pacakge.jso

  • 解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j

  • 解决vue打包后刷新页面报错：Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有问题,只有生产环境有问题,怪点二是只有一个页面有问题,其他页面完全正常 正文 报错截图: 根据上面的情况和以往经验,应该在index.html页面及发生错误的页面定位问题,但均解决不了问题. 最后找到此项目的路由处,经过多次测试,解决问题,也确定了问题原由,原来是:路由中path的值不能以小写m开头,否则

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • 解决vue-cli脚手架打包后vendor文件过大的问题

    大家会遇到打包后文件很大,导致页面初始化加载的速度很慢.会出现白屏的现象.这一般是你打包的vendor太大的缘故.如果你打包后看到你的vendor文件有700kb以上.你就要考虑怎么处理. 处理这种文件的 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> <script src="https:

  • 使用vue打包时vendor文件过大或者是app.js文件很大的问题

    第一次使用vue2.0开发,之前都是用的angular1.x.在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右..后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大. 我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { '

  • Vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

随机推荐