vue-cli多方面配置优化让你项目更强更快

📌

前端优化主要就是做两件事： 1：优化用户体验即减少首屏加载时间，提升交互的流畅度，如表单验证和页面切换

2：优化开发体验：减少构建耗时，自动化完成一些重复工作，解放生产力，脚手架就是代表产物，如WebPack提供最主要的优化手段splikChunksPlugin提取公共代码，按需加载

分析工具

• speed-measure-webpack-plugin，可以测量网页包构建速度，并会输出各个模块编译时长，可以帮我们更好的找到耗时模块

在vue.config.js里面配置
module.exports = {...,configureWebpack: () => { config.plugins.push(new SpeedMeasurePlugin())}} 

• webpack-bundle-analyzer，这个插件在可视化网页包中输出文件的大小，并且提供了交互式可缩放的树形图

在vue.config.js中配置
module.exports = {...,
configureWebpack: () => { config.plugins.push(new BundleAnalyzerPlugin())}}, vue-cli3已结内置，在package里面的serve代码命令里面加--report即可 

优化

• 按需引入，echart这些实现按需引入

import * as echarts from 'echarts/core'
import {BarChart,