vue.config.js打包优化(有效)
//百度上的资料五花八门让人眼花缭乱，别急，这时候我替你亲身经历了，有需要的可以参考下，先上效果图，以免你们以为我吹牛逼，嘻嘻
优化方向
1.图片资源压缩
2.将 productionSourceMap 设为 false，map不进行生成
3.cdn配置（可选）
4.代码压缩
5.公共代码抽离(个人感觉没啥用)
未优化之前的 //感觉太大了 抬它
优化之后的
废话不多说了，上代码是重点
这些是必要的下载
/*cnpm install image-webpack-loader --save-dev
cnpm install compression-webpack-plugin --save-dev
cnpm install uglifyjs-webpack-plugin --save-dev */
const webpack = require('webpack')
const path = require('path');
// gzip压缩
const CompressionPlugin = require('compression-webpack-plugin')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
const cdn = {
js: [
// vue必须在第一个
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js'
]
}
module.exports = {
//部署应用包时的基本 URL
publicPath: './',
//当运行 vue-cli-service build 时生成的生产环境构建文件的目录
outputDir: 'wx_vue',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'assets',
// eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
lintOnSave: false,
//是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
productionSourceMap: false,
/** 去掉hash */
filenameHashing: false,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
/** 删除懒加载模块的 prefetch preload，降低带宽压力(使用在移动端) */
config.plugins.delete("prefetch").delete("preload")
config.optimization.minimize(true)
// gzip压缩
// config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
// {
// filename: '[path].gz[query]',
// algorithm: 'gzip',
// test: /\.js$|\.html$|\.css/, //匹配文件名
// threshold: 10240, //超过10k进行压缩
// minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
// deleteOriginalAssets: false //是否删除源文件
// }
// ])
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
warnings: false, // 若打包错误，则注释这行
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
config.plugins.push(
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|\.css/,
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
// 公共代码抽离
config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
test: /[\\/]src[\\/]js[\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
},
//别名 不废话了代表你当前的那个目录需要啥自己加吧
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@c': path.resolve(__dirname, './src/components'),
'assets': path.resolve(__dirname, '../src/assets')
}
},
// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
externals: {
'vue':'Vue',
'vuex': 'Vuex',
'vue-router':'VueRouter',
'axios':'axios',
'qs':'Qs',
'vant':'Vant'
// 'weixin-js-sdk':'weixin-js-sdk',
// 'clipboard':'clipboard',
// 'qrcodejs2':'qrcodejs2',
// 'js-md5':'js-md5'
}
},
// css相关配置
css: {
extract: false,
loaderOptions: {
stylus: {
'resolve url': true,
'import': []
}
},
requireModuleExtension: true
},
// webpack-dev-server 相关配置
devServer: { // 设置代理
hot: true, //热加载
host: 'localhost', //ip地址
port: 8085, //端口
https: false, //false关闭https，true为开启
open: true, //自动打开浏览器
proxy: {
'/api': { //本地
target: 'https://xxxxx.cn/xxxx',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
},
pluginOptions: { // 第三方插件配置
// ...
},
chainWebpack: config => {
// ============压缩图片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
//{ bypassOnDebug: true }
============这个是真牛逼，图片压缩了而且小于多少kb的直接当作背景图处理===================
mozjpeg: { progressive: true, quality: 65 }, Compress JPEG images
optipng: { enabled: false }, // Compress PNG images
pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
gifsicle: { interlaced: false }, // Compress SVG images
webp: { quality: 75 }
})
.end()
// ============压缩图片 end============
// ============注入cdn start============
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
}
CDN加载的话html代码块
<%= htmlWebpackPlugin.options.title %>
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
//vue3 vue.config.js相对于vue2的话呢，更加简洁，你需要什么的操作，你得自己配置，增加自己的动手能力，除了一些语法上的改变，在有些写法上还是差不多的！打包优化的路还长，下次接着更