vue项目vue.config.js文件打包 配置、优化配置
vue项目优化、vue.config.js文件打包 配置、优化配置、vue配置,优化配置
·
const Timestamp = new Date().getTime()
// 压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// const { registerPreprocessor } = require('echarts/lib/echarts')
// 自定义配置插件
const TerserPlugin = require('terser-webpack-plugin')
process.env.VUE_APP_Version = 'v20200516'
module.exports = {
// 配置打包路径
publicPath: process.env.NODE_ENV === 'production' ? ('/' + process.env.VUE_APP_NAME) : '/',
outputDir: process.env.VUE_APP_NAME,
productionSourceMap: false,
chainWebpack: (config) => {
// ============压缩图片 start============
if (process.env.NODE_ENV === 'production') {
// config.module
// .rule('images')
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({ bypassOnDebug: true })
// .end()
// ============压缩图片 end============
config.plugins.delete('prefetch') // vue-cli3.0 加上这行才能按需加载 移除 prefetch 插件
// 移除 preload 插件
config.plugins.delete('preload')
// 压缩代码
config.optimization.minimize(true)
// 分割代码
config.optimization.splitChunks({
chunks: 'initial', // async异步代码分割 initial同步代码分割 all同步异步分割都开启
minSize: 30000, // 字节 引入的文件大于30kb才进行分割
// maxSize: 50000, //50kb,尝试将大于50kb的文件拆分成n个50kb的文件
minChunks: 1, // 模块至少使用次数
maxAsyncRequests: 5, // 同时加载的模块数量最多是5个,只分割出同时引入的前5个文件
maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个
automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
name: true, // 缓存组里面的filename生效,覆盖默认命名
cacheGroups: { // 缓存组,将所有加载模块放在缓存里面一起分割打包
vendors: { // 自定义打包模块
test: /[\\/]node_modules[\\/]/,
priority: -10, // 优先级,先打包到哪个组里面,值越大,优先级越高
filename: 'vendors.js'
},
default: { // 默认打包模块
priority: -20,
reuseExistingChunk: true, // 模块嵌套引入时,判断是否复用已经被打包的模块
filename: 'common.js'
}
}
})
}
},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// webpack 配置
config.plugins.push(
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.map$|\.css$/,
// 超过4kb压缩
threshold: 4096
})
)
config.plugins.push(
new TerserPlugin({
terserOptions: {
// 自动删除console
compress: {
// warnings: false, // 若打包错误,则注释这行
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
cache: true,
sourceMap: false,
parallel: true
})
)
config.output.filename = `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
config.output.chunkFilename = `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
} else {
config.devtool = 'source-map'
}
},
lintOnSave: false,
devServer: {
proxy: {
// 代理域名
'/api': {
target: 'https://v1.eleadmin.com/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)