vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法
1.压缩图片
应尽可能地压缩项目中的图片，或使用svg矢量图、雪碧图、webp图片（此种图片仅兼容谷歌和opera浏览器，但图片的体积更小）等小体积的图片，达到减少打包体积的目的。
2.路由懒加载
可以在路由配置里，使用require引入页面或组件实现路由懒加载，每个页面大约可以减少10—50kb的打包体积，示例如下：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = new Router({
routes: [{
path: '/index',
name: 'index',
component: (resolve) => {
require(['./index/index.vue'], resolve)
},
meta: {
title: '首页',
keepAlive: true,
deepth: 1
}
}, {
path: '/my',
name: 'my',
component: (resolve) => {
require(['./mine/mine.vue'], resolve)
},
meta: {
title: '个人',
keepAlive: true,
scrollTop: 0
}
},
{
path: '/*',
redirect: '/index'
}]
})
export default router
3.移除源代码，替换压缩后的源码
修改vue.config.js配置文件，提取公共方法或资源，打包时删除源代码，减少打包后的体积；在html使用外部链接引入相关源代码，
按此方法修改，vue大约可以减少70—80kb的打包体积，echarts大约可以减少100—120kb的打包体积（其他大型的源代码也可按此方法操作），示例如下：
在vue.config.js的配置改动
// 移除vue和echarts核心代码，减小编译后的zip包大小
config.configureWebpack.externals = {
vue: 'Vue',
echarts: 'echarts'
}
在index.html引入相关压缩后的源代码,相关源代码可以去BootCDN网站下载，有各个版本的开源和压缩代码，链接：https://www.bootcdn.cn/
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!--在这里重新引入压缩后的vue和echarts压缩后的源代码-->
<script src="./commonFile/js/vue.min.js"></script>
<script src="./commonFile/js/echarts.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
4.修改babel.config.js配置文件
const prodPlugins = []// 去除console日志
if (process.env.VUE_APP_CURRENTMODE === 'prod') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@babel/preset-env', //添加 babel-preset-env 配置
{
'modules': false
}
]
],
plugins: [...prodPlugins]// 去除console日志
}
5.组件、api按需引入
只引入需要用到的组件或api，按需引入的组件或api越多，越能减少打包体积。
import Vue from 'vue'
import { swiper, swiperSlide } from "vue-awesome-swiper";
6.静态资源文件的托管（CDN）
修改vue.config.js配置文件，静态资源文件（如图片、文件、公共方法等），可以使用CDN托管静态资源文件，大大减少打包后的体积，图片的数量越多甚至可达到3—4Mb
// 基础配置
var config = {
productionSourceMap: false,// 如果不需要生产时的源映射，那么设置为false可以加速生产构建
chainWebpack: config => {
if (process.env.VUE_APP_CURRENTMODE !== 'prod' && process.env.VUE_APP_CURRENTMODE !== 'prodtest') {
config.module.rule("images")
.test(/\.(jpg|png|gif|svg|jpeg)$/)
.use("url-loader")
.loader("url-loader")
.options({
limit: 3 * 1024,
name: `${appName}/img/[name].[ext]`
}).end();
} else {
config.module.rule("images")
.test(/\.(jpg|png|gif|svg|jpeg)$/)
.use("url-loader")
.loader("url-loader")
.options({
limit: 3 * 1024,//可以限制图片的大小，如超过3Mb的图片使用CDN，小图标可以使用本地资源图片
publicPath: '这里存放CDN图片的url地址前缀',//这里存放CDN图片的url地址前缀
name: '[name].[ext]'
}).end();
}
}
}
7.减少 HTTP请求数
8.使用svg矢量图代替png图片
9.图片、文件资源懒加载、预加载
10.防抖、节流
11.减少对DOM的操作