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

★雨潇★

于 2024-05-17 12:28:02 发布

阅读量1.3k

点赞数 42

分类专栏： Element-UI Vue.js js 文章标签：前端 vue.js echarts javascript

本文链接：https://blog.csdn.net/yasyList/article/details/138998185

版权

Vue.js 同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Element-UI

3 篇文章 0 订阅

订阅专栏

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