当前位置：首页 > news >正文

Vue项目打包优化（element+echarts+vue使用cdn）

news 2025/8/3 3:15:24

如何打包查看所有资源大小？
使用插件：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}})}
}