vue-cli3 编译打包文件的压缩优化

前言

相比于vue-cli2，vue-cli3隐藏了很多默认的webpack配置，没有vue-cli2那么一目了然。但是都提供了各部分的修改路口，可以仔细研读下官方文档。
vue-cli3官方文档
真的，如果真的不是业务需要，真的不会去仔细研读官方文档，因为读了也会马上忘掉。但是真的需要的时候，又会第一时刻想起官方文档，看了后才恍然大悟，原来官方文档里都写得一清二楚。内牛满面~~

正文

包含了打包压缩后图片的压缩和js，css文件压缩
首先，安装相关依赖包：

npm install --save-dev image-webpack-loader

npm install --save-dev compression-webpack-plugin

然后，在vue.config.js里进行配置（这里附带了上篇文章中ie11兼容es6的处理方法）：

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {publicPath: './',chainWebpack: config => {// 解决ie11兼容ES6config.entry('main').add('babel-polyfill')// 开启图片压缩config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({ bypassOnDebug: true })// 开启js、css压缩if (process.env.NODE_ENV === 'production') {config.plugin('compressionPlugin').use(new CompressionPlugin({test:/\.js$|\.html$|.\css/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false // 不删除源文件}))}},transpileDependencies: ['biyi-admin', // 指定对第三方依赖包进行babel-polyfill处理]

vue-cli3 编译打包文件的压缩优化相关推荐

vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
Vue、React打包文件放在服务器，浏览器存在缓存问题的解决
Vue.React打包文件放在服务器,浏览器存在缓存问题的解决参考文章: (1)Vue.React打包文件放在服务器,浏览器存在缓存问题的解决 (2)https://www.cnblogs.com/ ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
Linux——tar打包文件和压缩解压缩
1.压缩文件 gzip 文件名压缩后的文件格式: .gz 2.解压缩文件解压缩 .gz的压缩文件 gunzip 压缩文件名 3.tar 打包目录 tar tar命令可以用来压缩打包单文件.多个文件 ...
VUE引入Echarts 打包文件过大——解决方法2：CDN引入
小伙伴们注意啊!敲黑板了啊! 由于在vue中按需引入echarts,虽然打包时比全局引入小了一半,但还是占很多内存. 所以经过不懈研究,发现了一个能让vue项目打包时更小的方法,就是CDN引入 CDN ...
VUE引入Echarts 打包文件过大——解决方法1：按需引入
在vue中引入echarts文件 ,打包太大怎么办? 可以按需引入在vue项目中加入了echarts图表.在进行项目打包时发现,因为引入了全局的echarts,导致打包文件太大,在查找了一系列的文章 ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
在前端优化中,js.css等文件的优化一般都是压缩的优化,进行合并.减小体积以达到减小请求的目的. 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷. 配置方法首先需要去下载Microso ...
maven打包文件过大优化
很多公司在使用maven私服的时候为了优化磁盘空间,去除不必要的文件.如果是单pom项目中在配置中引入 <properties><maven.deploy.skip>true& ...

vue-cli3 编译打包文件的压缩优化

前言

正文

vue-cli3 编译打包文件的压缩优化相关推荐

最新文章

热门文章