如何打包查看所有资源大小？
使用插件：webpack-bundle-analyzer
效果图：
安装webpack-bundle-analyzer
第一步，终端执行
npm instatll webpack-bundle-analyzer --save-dev
第二步，vue.config.js配置
module.exports = {
chainWebpack(config) {
// 这里我做了只有开发环境才使用，关键代码是if下面的
if (process.env.NODE_ENV === 'development') {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}
有的小白同学就要问了，说 为什么我的chainWebpack是这样的箭头函数：
chainWebpack: config => {
}
其实用法是一样的，丢到里面就行了！
第三步，package.json配置
在的你打包命令后面加上 --report
"build": "vue-cli-service build --report"
然后执行打包命令，npm run build 即可看到效果！
Element-UI使用CDN
第一步，vue.config.js配置
module.exports = {
configureWebpack: {
externals: {
'element-ui': 'ELEMENT'
}
}
}
第二步，index.html引入cdn地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
增加：
<link rel="stylesheet" href="elementui.css的cdn地址" />
</head>
<body>
增加：
<script src="elementui.js的cdn地址"></script>
<div id="app"></div>
</body>
</html>
没有地址？没关系，我推荐一个cdn网站：
https://www.bootcdn.cn/
打开搜索你需要的cdn名称，选择你要的指定版本。
ctrl+f 搜索：theme-chalk.css和index.js 复制
粘贴替换以上地址即可。
然后返回页面即可使用。
Element-UI使用cdn后Loading和Message无效报错？
是的，这两个在js的使用方法方法有所不同，要使用下面的方式：
vue2：loading
// 使用ELEMENT.Loading
ELEMENT.Loading.service(options)
vue3：loading
ElementPlus.ElLoading.service(options)
那么同理，vue.config.js的cdn也要改成如下：
'element-plus': 'ElementPlus',
ok，然后就没问题了，如有问题，下面留言！
echarts使用cdn
跟以上方式一样，vue.config.js配置：
externals: {
echarts: 'echarts'
}
然后cdn搜索echarts，找到echarts.min.js。
然后index.html引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="stylesheet" href="elementui.css的cdn地址" />
</head>
<body>
<script src="elementui.js的cdn地址"></script>
增加2：
<script src="echarts.js的cdn地址"></script>
<div id="app"></div>
</body>
</html>
然后页面直接可以使用。echarts.init()
Vue使用cdn
同理，搜索vue选版本，找到vue.min.js
index.html引入
记住引入顺序，vue>elementui
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="stylesheet" href="elementui.css的cdn地址" />
</head>
<body>
增加：
<script src="vue.js的cdn地址"></script>
<script src="elementui.js的cdn地址"></script>
<script src="echarts.js的cdn地址"></script>
<div id="app"></div>
</body>
</html>
配置gzip打包压缩
安装compression-webpack-plugin，注意，需指定版本
npm i compression-webpack-plugin@6.1.1 --save
vue.config.js修改
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
chainWebpack(config) {
config.plugin('compression').use(CompressionWebpackPlugin, [
{
filename: '[path][base].gz',
algorithm: 'gzip',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}
])
}
}
配置其他优化项
安装图片压缩
npm install --save-dev image-webpack-loader
vue.config.js修改，以及其他优化项：
module.exports = {
chainWebpack(config) {
// 打包加hash时间
config.output.filename('js/[name].[hash].js')
config.output.chunkFilename('js/[name].[hash].js')
// 移除 preload(预载) 插件
config.plugins.delete('preload')
// 移除 prefetch(预取) 插件
config.plugins.delete('prefetch')
//图片压缩
config.module
.rule('images')
.use('imageWebpackLoader')
.loader('image-webpack-loader')
.options({
disable: process.env.NODE_ENV === 'development', // 开发环境下禁止压缩
gifsicle: {
interlaced: false
}
})
}
}
感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~
