第一步:安装插件

npm i -D compression-webpack-plugin

  

第二步:引入。在文件vue.config.js里导入compression-webpack-plugin,并添加压缩文件类型

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

  简单方式:

configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
}

  高级方式:

configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 配置productionGzip-高级的方式
// 配置参数详解
// asset: 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
// algorithm: 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
// test: 所有匹配该正则的资源都会被处理。默认值是全部资源。
// threshold: 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
// minRatio: 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
)
} else {
// 开发环境
}
}

  

三、运行 npm run build 完成

四、完整vue.config.js文件配置

const path = require('path')
const defaultSettings = require('./src/settings.js')
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'] function resolve(dir) {
return path.join(__dirname, dir)
} const name = defaultSettings.title || '我是title'
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const port = 9528 // dev port
// const port = 8200 // dev port // All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
publicPath: '/',
// 输出文件路径,默认为dist
outputDir: 'dist',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
// indexPath: '',
// 保存时 lint 代码
lintOnSave: process.env.NODE_ENV === 'development',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
devServer: {
host: '0.0.0.0',
port: port, // 配置端口
open: true, // 自动开启浏览器
compress: true, // 开启压缩
// 设置让浏览器 overlay 同时显示警告和错误
overlay: {
warnings: false,
errors: true
},
// 设置请求代理
proxy: {
'/api/*': {
target: 'http://xx.xx.xx.xx:xxxx/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '' // 请求地址
}
}
}
},
configureWebpack: config => {
config.name = name
config.resolve.alias['@'] = resolve('src')
config.performance = {
hints: 'warning',
//入口起点的最大体积 整数类型(以字节为单位)
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型(以字节为单位 300k)
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js')
}
}
if (process.env.NODE_ENV === 'production') {
// 生产环境
// 编译时删除console.log
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
// 配置productionGzip-高级的方式
// 配置参数详解
// asset: 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
// algorithm: 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
// test: 所有匹配该正则的资源都会被处理。默认值是全部资源。
// threshold: 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
// minRatio: 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
)
} else {
// 开发环境
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({
symbolId: 'icon-[name]'
}).end() // set preserveWhitespace
config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
}).end() // https://webpack.js.org/configuration/devtool/#development
config.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
) config.when(process.env.NODE_ENV !== 'development',
config => {
config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}]).end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
}

  

@vue/cli 3.x 版本配置productionGzip提高性能的更多相关文章

  1. vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作

    const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...

  2. vue cli3.3 以上版本配置vue.config.js

    // vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只 ...

  3. vue/cli新旧版本安装方式

    一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

  4. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  5. ASP.NET MVC之如何看待内置配置来提高性能优化(四)

    前言 前几篇我们比较基础的讲了下MVC中的知识,这一节我们穿插点知识,讲讲MVC中我们可以提高性能的办法. Razor视图引擎优化(优化一) 我们知道默认情况下配置MVC去解析一个视图会首先约定通过查 ...

  6. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  7. 使用vscode开发vue cli 3项目,配置eslint以及prettier

    初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...

  8. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  9. 更新到@vue/cli 4.1.1版本的前端开发前的准备

    一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js ...

随机推荐

  1. LintCode 29---交叉字符串

    public class Solution { /** * @param s1: A string * @param s2: A string * @param s3: A string * @ret ...

  2. Linux经典操作

    1.Linux批量终止在运行中包含某个字符串的所有进程. ps -ef|grep celery | grep -v grep|cut -c 9-15|xargs kill -9

  3. Mysql 备份数据库方法及when using LOCK TABLES错误解决方法

    可以将以下代码保存为backup.bat,添加计划任务即可. @echo off ,,%" ,%" "D: -uname -pxxxx -P3306 --skip-loc ...

  4. 设置Windows静态IP+动态IP

    静态IP 设置以太网属性 进入IPv4属性 设置IPv4 动态IP 同上方法,只不过选成了自动

  5. plsql执行sql

    第一步找执行的命令:: plsql ::::::::::File----->>>>Change Windows to ------->>>Command Wi ...

  6. 你在和脚本谈恋爱(自动化在IM聊天中的应用)

    谢谢打开这篇文章的每个你 测开之分层自动化(Python)招生简章 Python自动化测试报告美化 在python中进行数据驱动测试 太嚣张了!他竟用Python绕过了“验证码” 在网络世界里你不知道 ...

  7. 自动化运维——MySQL备份脚本(二)

    使用if语句编写MySQL备份脚本 代码: #!/bin/bash #auro backup mysql db #by steve yu #define backup path BAK_DIR=/da ...

  8. nginx搭建及加固

    系统使用的是centos7 Nginx安装及配置 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务 安装 我是用的环境是ce ...

  9. 清除zencart分类页多页后面的&disp_order &sort字符串的方法

    在includes\classes\split_page_results.php页面中的function display_links()函数第一行添加如下两行代码即可$parameters=preg_ ...

  10. struts2 JSON 插件的使用

    1. 导入包: json-lib-2.3-jdk15.jar struts2-json-plugin-2.3.15.3.jar 2. 在struts.xml中修改配置如下: <package n ...