vue项目打包优化之减小包体积
程序员文章站
2022-05-31 09:16:14
...
1.在config.js文件中进行响应的配置
// 需要排除的包对象
let externals = {}
// 需要配置的 CDN 链接
let CDN = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境，需要执行以下逻辑
if (isProduction) {
externals = {
/**
* externals 对象属性解析：
* '包名': '在项目中引入的名字'
* 'ELEMENT' 这个值是固定的
*/
'vue': 'Vue',
'element-ui': 'ELEMENT'
}
CDN = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element 样式表
],
js: [
// vue cdn包必须在第一个
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js',
'https://unpkg.com/element-ui/lib/index.js' // element-ui js
]
}
}
// 在这里具体使用
module.exports = {
...省略其他配置
configureWebpack: {
...省略其他配置
externals
},
chainWebpack(config) {
// 注入cdn变量 (打包时会执行)
config.plugin('html').tap(args => {
args[0].cdn = CDN // 配置 CDN 给插件
return args
})
...省略其他配置
}
}2.public下的index.html 写入模版语法
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!-- 引入css -->
<% for(let css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
<!-- 引入JS -->
<% for(let js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</head>包CDN查询地址： https://github.com/bootcdn/BootCDN
查看打包后的体积命令：vue-element-admin 中的构建和发布模块
npm run preview -- --report
上一篇： java判断图片地址链接是否有效
下一篇： webpack打包体积优化