vue 项目优化打包时间

10月前作者：菜菜爱吃菜c 分类：Toy博客阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了vue 项目优化打包时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

优化Vue项目的打包速度

随着项目依赖的增加, 在配合开发的时候听到后端同学的抱怨 build 时间长, 及其影响开发效率和心情. 然后翻阅了相关的资料开启Vue优化之路。
此项目是针对vue-cli2脚手架进行优化的

优化配置
修改config/index.js下的文件

// 开发环境dev下, 设置为`eval`能提高最快速度, 但是缺点是不能正确显示行号, Debug会有点影响
devtool: 'eval'
// 关闭生产环境的sourceMap, 不懂是啥的话可以看下面的文章
// 阮一峰 - JavaScript Source Map 详解(http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html)

productionSourceMap: false

在src/mian.js关闭生产环境下的调试信息**

const isDebugMode = process.env.NODE_ENV !== "production";
Vue.config.debug = isDebugMode;
Vue.config.devtools = isDebugMode;
Vue.config.productionTip = isDebugMode;

这样就成功了大概可以缩减5分钟的时间文章来源地址https://www.toymoban.com/news/detail-820868.html

到了这里，关于vue 项目优化打包时间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

idea编译打包前端vue项目

网上download了一个前端vue项目第一次接触前端记录一下编译打包遇到的问题 1、idea前端项目打包一般是依赖 groupIdorg.codehaus.mojo/groupId artifactIdexec-maven-plugin/artifactId version3.0.0/version 这个maven插件里面可以定义要执行的打包步

2024年01月23日
浏览(39)
node.js+NPM包管理器+Webpack打包工具+前端项目搭建

javascript运行环境（无需依赖html文件） BFF，服务于前端的后端官网下载安装，node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行（或者通过工具的集成终端） node 01.js 如果出现权限原因，可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

2024年02月07日
浏览(73)
docker打包vue vite前端项目

(如若提供一些帮助，请帮忙点个赞) 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功（黄的也不知道是啥）打包好的前端文件放入 4.配置 default.conf 5.配置dockerfile 6.进入你的文件夹下面我的是 /root/206/web docker build -t web:v1 . 注意后面的 . 点 7.运行 docker run -it -

2024年02月07日
浏览(35)
前端练手小项目--自定义时间（html+css+js）

关于要写这篇文章的原因是记录在工作上遇到的困难需求，是希望能给大家提供一些解决问题的思路接下来我描述这个需求的多样性，难点在哪。勾选勾选框开始时间与结束时间默认显示昨天与今天。取消勾选框开始时间与结束时间清空。选择开始时间，勾选框勾选，结

2024年02月12日
浏览(44)
前端Vue项目webpack打包部署后源码泄露解决

前端项目使用nuxt框架（基于Vue），采用Webpack打包，部署到服务器后，进行漏洞检测。经Webpack打包部署到服务器后，访问并打开开发者模式，在Source下出现[name]路径，内部包含(webpack)buildin文件夹。（做漏洞分析时，会认为该内容涉及源码泄露） 1.首先考虑源码泄露的问题打

2024年02月03日
浏览(87)
vue项目打包优化：缩小体积productionSourceMap设置，使用cdn加速

一、vue项目打包体积大优化之productionSourceMap设置 1、productionSourceMap 的作用 productionSourceMap 在构建时生成完整的 SourceMap 文件，默认情况下开启。生产环境中启用 productionSourceMap 有助于开发者调试代码，可以在浏览器的调试工具中查看到源文件中错误的代码位置，而不是编译后

2024年02月21日
浏览(45)
vue将某个组件打包成js，在其他项目使用

1、首先创建一个组件的文件，里面包括了组件页面和index.js，index.js的作用是把组件暴露出去，目录结构： 2、index.js里面的内容 3、配置package.json打包命令，可以通过 --mode 后面参数指定打包环境注意：目前vue.config.js里面是没有任何配置的，到这里其实就可以了，运行打包命

2024年02月16日
浏览(62)
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）

目录第一章前言第二章准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

2024年02月04日
浏览(59)
【前端部署】vue项目打包并部署到Linux服务器

在vs code中打开vue前端项目文件夹，在终端中输入 npm run build ，打包完成后，在前端项目文件夹中会生成一个名为 dist 的文件夹，如下图所示： dist文件夹打开如下所示：打开服务器终端，在终端中输入以下命令，下载nginx安装包。其中nginx版本可以自己选择，具体版本可查看

2024年02月06日
浏览(68)
vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

参考地址：https://v4.webpack.js.org/plugins/compression-webpack-plugin/ 一、compression-webpack-plugin的使用，安装插件二、在 webpack 配置中,require 或 import 引入三、配置参考地址：https://v4.webpack.js.org/plugins/terser-webpack-plugin/ 一、安装terser-webpack-plugin 二、在 Webpack 配置中引入三、配置

2024年04月14日
浏览(55)