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
License
作者:GeniusLyzh
出处:http://www.cnblogs.com/GeniusLyzh/
本文链接:https://www.cnblogs.com/GeniusLyzh/p/14852563.html
本文版权归作者和博客园共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
如果阅读了本文章,觉得有帮助,欢迎点击右下角推荐
出处:http://www.cnblogs.com/GeniusLyzh/
本文链接:https://www.cnblogs.com/GeniusLyzh/p/14852563.html
本文版权归作者和博客园共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
如果阅读了本文章,觉得有帮助,欢迎点击右下角推荐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战