Vue CLI4.x 配置指南
Vue CLI4.x 配置指南
Version
Vue CLI 测试版本：@vue/cli 4.5.4
目录
⚡去掉console.log
// 内置插件不需要安装
const TerserPlugin = require('terser-webpack-plugin')
// 方法一：简单配置
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
sourceMap: false,
})
],
},
};
// 方法二：基于环境有条件地配置
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
const plugins = []
plugins.push(
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
sourceMap: false,
})
)
config.optimization.minimizer = [
...config.optimization.minimizer,
...plugins,
]
}
},
}
⚡添加打包分析
- Install
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
- Usage
// 方法一：通过configureWebpack选项配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
const plugins = []
plugins.push(
new BundleAnalyzerPlugin({
analyzerMode:'static' // static模式会生成一个html页面查看，默认为server
})
)
config.plugins = [
...config.plugins,
...plugins,
]
}
},
}
- Reference
🎃 使用SplitChunksPlugin分离第三方模块
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.splitChunks = {
cacheGroups: {
// 提取重复引用公共库
common: {
name: 'chunk-common',
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 1,
reuseExistingChunk: true,
enforce: true,
},
// 其他第三方库
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
priority: 2,
reuseExistingChunk: true,
enforce: true,
},
// 单独分离elementplus库
elementUI: {
name: 'chunk-elementplus',
test: /[\\/]node_modules[\\/]element-plus[\\/]/,
chunks: 'all',
priority: 3,
reuseExistingChunk: true,
enforce: true,
},
},
}
}
},
}
- Reference
