vue-cli4 项目打包优化

1.通过命令行参数的形式生成报告：

// 通过vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成report.html 以帮助分析包的内容
vue-cli-service build --report

2.路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
方法：

• 安装 @babel/plugin-syntax-dynamic-import 包
• 在 babel.config.js 配置文件中声明该插件
• 将路由改为按需加载的形式，代码如下：

// 只有安装了插件才能用如下语法
const Foo = ()=> import(/* webpackChunkName:"group-foo" */ './Foo.vue')
const Bar = ()=> import(/* webpackChunkName:"group-foo" */ './Bar.vue')
const Boo = ()=> import(/* webpackChunkName:"group-boo" */ './Baz.vue')

关于懒加载更详细的文档可参考：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

vue-cli4 项目打包优化

原文：https://www.cnblogs.com/liea/p/11853748.html