然后在路由文件中引入组件的代码如下：
{
path:"/test",
name:"test",
component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}在引入组件的时候，加上/ webapckChunkName: “文件名” /，就这可以将对于的组件打包到指定名称的文件下，这样可以减少首次加载的文件的大小，对于一些没有联系的功能，比如不同页面，我们可以把对应的组件放在同一个文件，这样，既可以减少首次加载文件达大小，同时也可以将文件实现一个按需加载，提高页面性能；
通过控制台，我们可以查看当前加载的文件资源，当我们点击测试按钮的时候，页面发生的跳转，这时候，我们会发现，在Network下，会加一条新的资源加载信息，这一条就是我们的分块打包后请求的资源；
步骤六、全局过滤器filter和全局注册组件的引入
写到这里的时候，可能很多人都会觉得，全局注册filter和全局组件组件不是很简单吗，直接Vue.filter()和Vue.component()不久解决了吗，其实这么讲也没错，但是你可曾想过，注册全组件是挂载在Vue对象下的，这意味这按照正常思路，我们要写在main.js文件下，这样就会造成，我们所写的mian文件过于冗长，你可以想一下，把全局的过滤器，和组件都写进去，着实丑陋，很不优雅，下面跟大家说一个优雅的实现方法：
首先，我们在src>assets目录下新建一个js文件夹，再该文件夹下再创建一个filters.js的文件，如下图：
接下来，我们在filters.js文件下写我们的全局过滤器，再将其抛出，写一个时间过滤器作为例子：
const fullTime = val => {
var dateObj = new Date(Number(val));
var year = dateObj.getFullYear();
var month =
dateObj.getMonth() + 1 > 9
? (dateObj.getMonth() + 1).toString()
: "0" + (dateObj.getMonth() + 1).toString();
var date =
dateObj.getDate() > 9
? dateObj.getDate().toString()
: "0" + dateObj.getDate().toString();
var hour =
dateObj.getHours() > 9
? dateObj.getHours().toString()
: "0" + dateObj.getHours().toString();
var minutes =
dateObj.getMinutes() > 9
? dateObj.getMinutes().toString()
: "0" + dateObj.getMinutes().toString(); return year + "/" + month + "/" + date + " " + hour + ":" + minutes;
