21.Vue---npm run build 项目打包文件过大(体积优化)

  在项目打包完成后,经常会遇到一些文件过大或者一些路径地址不对的问题从而导致项目加载缓慢以及一些图片加载不出来或者一些其他问题的产生。根据自己打包后遇到的一些问题在这里记录一下,以防下次遇到后还的麻烦性的查找,唉??~~~,就是懒,哈哈。

  (注:本文呢我就写一些遇到的问题和一些解决的方法,具体的实现过程,我想各位应该都查阅过一些博客了,我就附上参考链接吧!??这博主Realy lazy!!!)

一、vender文件过大,或者时app.js文件很大,又或者路径地址不对:

  1.不常用的库的CDN方式引入。  参考地址:https://www.cnblogs.com/wjunwei/p/9242142.html

  2.Router路由的懒加载。     参考地址:同1

  3.config/index.js 下的build 中的asstsPublicPath改为‘./‘ 即 assetsPublicPath: ‘./‘,         (作用:静态路径的修改,防止打包后路径地址重复或者不对的问题发生。)

  4.build/utils.js 下的 if (options.extract) 中的 return ExtractTextPlugin.extract({ }) 加一个属性设置 publicPath:‘../../‘ //关键句  (作用:跟3一起使用,作用一致。)

  5.config/index.js 下的build 中的productionSourceMap改为false 即 productionSourceMap: false,                  (作用:避免生成map文件,打包更快。)

  6.config/index.js 下的build 中的productionGzip改为true (注:这个压缩方法呢我没使用,但根据看的一些博客都说也是一种优化方式,你们使用时可以查一下该方式的使用方法,还需要下载插件)

二、app.css文件过大:

  1.build/webpack.base.conf.js 中 修改 url-loader的limit属性。默认是100000,我改成了5000。 (该方法呢尝试了几次修改大小,但是结果文件的优化有限,自己酌情待估吧。)

   2.使用extract-text-webpack-plugin插件。 参考链接:https://www.cnblogs.com/dyx-wx/p/6529447.html ;

   如果报 webpack Can‘t resolve ‘style-loader‘ 这个错误,则就请大家查看参考链接:https://www.jianshu.com/p/26fd6103e577

     (注意:大家在使用这个插件时,打包时在webpck.base.conf.js文件中的 rules 中添加的那个配置对象打开,在本地运行时呢,把这个注释掉,否则本地会报错。参考地址:https://blog.csdn.net/sinat_33312523/article/details/72566004

三、图片过大:

  1.使用TinyPNG压缩图片,但是图片质量不会有太大影响。 地址:https://tinypng.com/

  2.使用cdn网站,把图片传上去,使用线上地址。如:腾讯云cdn、阿里云cdn (本人没有使用过这个,只因为需要花钱,心疼。。。 大家要是想使用该方法可以问问公司是否有使用一些相关的cdn)

原文地址:https://www.cnblogs.com/xintao/p/11781073.html

时间: 2024-10-08 04:24:45

21.Vue---npm run build 项目打包文件过大(体积优化)的相关文章

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESlink e2e等是测试工具,经常会报一些vue语法等错误,有时会比较麻烦,可以关闭 3.再安装依赖 npm install npm安装建议挂VPN,不然很慢而且容易出错,不能挂VPN的话可以用cnpm的方式安装国内镜像 4.安装成功直接打开了首页 5.运行 npm run dev 6.项目编译 npm

Vue - 如何使用npm run build后的dist文件夹

脚手架vue cli生成项目后,使用 npm run build 生成了一个dist文件夹(应该是distribution的缩写) 只要放在http服务器上就可以运行. 使用一句python命令可以搭建http服务器 python -m http.server --directory . 原文地址:https://www.cnblogs.com/allen2333/p/10257640.html

vue中Npm run build 根据环境传递参数方法来打包不同域名

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 1 2 3 4 5 6 7 'use st

vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

问题来啦 运行npm run dev以开发模式打开调试好了你的案例程序:你还不满足于仅仅把代码放在github上,想直接能把案例效果build版本的代码在本地预览或者放在你的个人博客上供大家直接看效果学习. 这时如果直接运行npn run build是可以运行并打包你的代码的,不会报任何异常或错误,但是你会看到你的命令行打包完成有这样一句提示: 估计看到这里你是不是第一感觉说:不是警告色,说明应该没啥问题吧,(也许是英语不过关也许是懒得不想看反正是没看这段提示是什么意思)抱着试试看的侥幸心理,默

npm run build打包后自定义动画没有执行

问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract字段的值改为false,再打包上线,就ok了! 原文地址:https://www.cnblogs.com/duanyue/p/9353903.html

vue 关于npm run build 的小问题

vue项目使用npm run build命令进行打包操作,打包之后试运行报错,报错为: 且命令行警告信息为: 解决办法: 找到项目目录下的config文件夹里的index.js文件,将build对象下的assetsPublicPath中的"/",改为"./"即可,就在前面加个点就可以了, 再次运行命令行: npm run build,将打包好的dist文件放到本地服务器下,浏览器打开对应地址即可. PS: 查看打包后dist 文件是否可以正常运行有一个前提,需要将d

npm run build 打包后,如何运行在本地查看效果

目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果.一开始是毫无头绪,什么都不懂,直接是就在命令行上敲下:npm run build命令. 好开心啊,竟然没有报错.以为就这么简单的成功了,在浏览器上输入:http://localhost/MGT/learnVuex/dist/index.html,一片空白.果然没有那么顺利.

npm run build 打包后,如何运行在本地查看效果(Nginx服务)

这段时间,有点时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆的路径问题!!!!!! 然后我就去研究了Nginx ...我原谅我老大了. 一.初识nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力

关于vue的npm run dev和npm run build

├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack.prod.conf.js │ └─webpack.test.conf.js ├─config │ ├─dev.env.js │ ├─index.js