打包优化会用到的代码

一.路由懒加载

懒加载的意义:一个路由对一个组件，表示一个页面。只有在路由进入这个页面时，才去加载这个组件对应的资源。

路由懒加载中的魔法注释

通过在注释中指定webpackChunkName，可以人为设置这个文件的名字。如下示例:

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

 二.包大小分析

我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析，它的使用非常简单

npm run preview -- --report

执行完这个命令之后就可以在控制台看到如下输出:

 然后在我们的dist文件下就可以看到一个report.html文件,打开就可以查看各个包的大小了,然后依据各个包所占比大小去查看那些比较大的包是否可以修改变小.

 三.去掉console-log

在vue.config.js中，配置：