前端项目在开发完成后，需要通过npm run build来对项目进行打包，然后对项目进行服务器部署。vue项目中有时候三方库可能会用到echarts，momentjs，elementui等相关三方库协助开发。以下是对比部分引入和整体引入后的项目打包体积。
添加webpack-bundle-analyzer分析库
webpack-bundle-analyzer可以帮助我们分析webpack打包文件的体积。具体配置如下，
在vue项目的vue.config.js中配置
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //主要引入打包分析库
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
plugins = [
new BundleAnalyzerPlugin(), //将分析库配置到生产环境中
]
}
}
}
命令行使用打包命令
使用npm run build对项目进行打包
1.优化依赖（内网项目跳过该环节）
1.配置vue.config.js
//打包项目跳过一下相关依赖
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts'
}
}
在index.html中使用CDN引入
<body>
<script src="http://*********/vue.min.js"></script>
<script src="http://*********/vue-router.min.js"></script>
<script src="http://*********/axios.min.js"></script>
<script src="http://*********/echarts.min.js"></script>
</body>
2.项目中优化echarts
整体引入代码：
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //echarts实例挂载到vue上
动态引入代码，开发人员根据需求选择引入的echarts图表：
import * as echarts from 'echarts/core' // 引入echarts核心模块
import { LineChart, HeatmapChart } from 'echarts/charts' // 引入折线图
import { GridComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components' // 引入中间绘制部分和图例等模块 visualMap为热力图需要引入的模块
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
LineChart,
HeatmapChart,
GridComponent,
TooltipComponent,
LegendComponent,
VisualMapComponent,
CanvasRenderer
])
Vue.prototype.$echarts = echarts //echarts实例挂载到vue上
3.项目中优化momentjs
momentjs在打包以后在local文件中会保存各种语言包，只需引入中文语言包
1.安装moment-locales-webpack-plugin
cnpm i -d moment-locales-webpack-plugin 依赖库安装
2.vue.config.js配置
const MomentPlugin = require('moment-locales-webpack-plugin') //语言包选在plugin
module.exports = {
configureWebpack: (config) => {
let plugins = [
new MomentPlugin()
];
return {
plugins
}
}
}
4.项目中优化element-ui
1.安装bable-plugin-component依赖
cnpm i -d babel-plugin-component
2.配置babel.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
3.引入文件修改
import { Input, Button, Dialog, Select, Calendar, Option } from 'element-ui
Vue.component(Input.name, Input) //引入inpurt
Vue.component(Button.name, Button) //引入button按钮
Vue.component(Dialog.name, Dialog) //引入弹窗dialog
Vue.component(Select.name, Select) //引入下拉选择
Vue.component(Calendar.name, Calendar) //引入日期选择
Vue.component(Option.name, Option) //引入option选择
`
总结（图片上传失败）
原先打包后的文件大小 6.8M左右，动态引入打包以后的项目5.7M左右。
注释：后续还有优化空间（本地库内包含公司内部开发库，打包体积较大）
