vue.config.js配置gZip压缩 和 去掉 console.log

最新推荐文章于 2024-07-10 12:09:00 发布
最新推荐文章于 2024-07-10 12:09:00 发布
阅读量315 收藏
点赞数
文章标签： javascript vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45979310/article/details/120974235
版权
本文介绍了如何在Vue项目中配置gZip压缩，以减小文件体积，提高加载速度。同时，文章也提及了由于compression-webpack-plugin最新版本7.1.1存在错误，需要降级使用。在配置完成后，不仅要在vue.config.js中进行设置，还须在服务器端，如nginx.conf文件中启用gzip_static选项。此外，还提到了去除console.log的实践，以优化生产环境的代码。
摘要由CSDN通过智能技术生成

安装，目前compression-webpack-plugin最新7.1.1会报错，所以降版本。

npm install compression-webpack-plugin@6.1.1 -D
npm install uglifyjs-webpack-plugin -D

在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin');    // 开启zip压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')   // 去掉注释

module.exports = {
最低0.47元/天 解锁文章
weixin_45979310
关注
vue.config.js配置gzip文件压缩，图片压缩
zyf1910的博客
05-13 1388
const path = require('path'); const CompressionWebpackPlugin = require('compression-webpack-plugin') const compress = new CompressionWebpackPlugin({ filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240,
vue中遇到数据更新但是页面没有更新的情况
热门推荐
u010007013的博客
05-10 2万+
今天在项目中遇到了一个需求，点击改变数据，之后在页面上立即看到更改后的数据。 首先，如上图的黄色按钮是通过v-for 循环产生的，data()里只有数据cards:[ … ]，cards的值是通过调用后台接口拿到的。 data(){ return { cards:[] } } <div v-for="card in cards" :key="card.id"> ...
Vue项目性能优化、开启gzip
最新发布
m0_71071209的博客
07-10 511
Gzip 压缩是一种简单、有效且广泛使用的前端性能优化技术，可以带来多方面的好处。
Vue 项目开启gzip
qq_30193097的博客
09-01 2784
2、 对 webpack 配置打包压缩，并在服务端加上支持gizp的配置，当浏览器请求时，服务端直接将资源返回给浏览器。1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器。第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）第一种是服务端进行实时压缩，对服务器的性能消耗较大。首先，安装 compression 插件。如下图，看到响应头中出现。
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
mebell的专栏
09-18 702
npm install image-minimizer-webpack-plugin imagemin imagemin-pngquant --save-dev
vue项目开启gzip压缩
z750467878的博客
11-22 2354
vuecli项目使用compression-webpack-plugin实现gzip压缩（nodejs版本）
vue.config.js配置打包之类操作 webpack（压缩js，css,图片）
shi19970609的博客
12-28 2102
// vue.config.js的基础配置 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩 const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀 const merge = require("lodash.merge"); //对象合并插件 const U.
Vue Cli3 项目 vue.config.js 配置
qq_38870034的博客
09-18 1394
Vue Cli3 项目 vue.config.js 配置 配置优化 • 一、js文件最小化处理 • 二、分割代码 • 三、图片资源压缩 • 四、开启gzip压缩 • 五、优化scss配置文件的引入 • 六、公用代码提取，使用cdn加载 • 七、去除console.log 通过vue-cli3脚手架创建的项目，可以通过在项目根目录下创建vue.config.js配置文件来修改优化webpack配置，主要优化流程分为以下几步进行，用于优化项目打包，减小体积大小 一、js文件最小化处理 代码的最优化, 通过cha
vue.config.js配置压缩dist
zhhao1的博客
11-22 3239
vuecli配置 不看不知道一看吓一跳 学习vue.config.js刻不容缓 贴出我的config const isProduction = process.env.NODE_ENV === 'production'; const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const cdn = { css: ["http...
vue cli3/4 vue.config.js配置详解
weixin_43899935的博客
08-12 1614
vue.config.js 创建的时候没有，需要手动创建 const path = require('path'); const webpack = require('webpack'); const UglifyPlugin = require('uglifyjs-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); // const PurgeCssWebpackPlugin = requir
vue 项目优化上线以及如何开启gzip压缩
qq_35452726的博客
02-13 910
vue 项目优化上线以及如何开启gzip压缩
vue.config.js配置 打包去掉console.log
ur home
01-25 3697
configureWebpack: config => { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = process.env.NODE_ENV === 'production' // provide the app's title in webpack's name field, so that config.externals = { name:.
在vuecli3怎么压缩代码以及打包怎么去除console.log？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-12 1242
安装uglifyjs-webpack-plugin 版本："uglifyjs-webpack-plugin": "^2.2.0", npm install uglifyjs-webpack-plugin --save-dev 配置 在文件vue.config.js里进行配置 // 引入 const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { chainWebpack: config => { .
配置vue.config.js
weixin_44976418的博客
04-20 306
配置vue.config.js 1:安装compression-webpack-plugin插件,用于打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。 1.1引入compression-webpack-plugin const CompressionPlugin = require(“compression-webpack-plugin”) 1.2 //打包压缩 在chainWebpack中 if (process.en
vue项目开启Gzip压缩和性能优化
weixin_41756610的博客
07-27 502
第一步，在vue项目中安装依赖并将config/index.js中 productionGzip改为true，开启Gzip压缩： 然后安装插件compression-webpack-plugin npm install --save-dev compression-webpack-plugin 第二步，运行 npm run build打包项目 这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。根据官网提示，需要将Compress
vue.config.js 去掉 console 方法
qq_36229552的博客
10-29 1672
安装插件： npm install uglifyjs-webpack-plugin vue.config.js 引入 const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’) 使用：（ warnings: false 放compress 报错，把它放外面一层可以正常使用 ） 正常使用： // 生产环境 if (process.env.NODE_ENV === 'production') { config.plug
Vue CLI3 3.x 配置 vue.config.js 清除 console
qq_36537108的博客
06-30 3866
Vue CLI3 3.x 配置 vue.config.js 清除 console ,实测可行。 `warnings` is not a supported option
vue.config.js去掉vconsole调试器
weixin_40667880的博客
06-19 1万+
由于npm run build打包发布生产环境时，需要去掉vconsole调试器。在vue.config.js文件中加入如下代码： const vConsolePlugin = require('vconsole-webpack-plugin') configureWebpack: config => { //生产环境去掉vconsole调试器 let envFlag = ...
vue.config.js: 实现跨域请求的配置详解
为了处理这种场景，Vue CLI提供了灵活的配置机制，通过在`vue.config.js`文件中设置开发服务器的代理规则，可以轻松解决跨域问题。下面详细介绍如何在`vue.config.js`中配置跨域。 首先，打开或创建`vue.config.js`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值