VueRouter按需加载

如果router.js中全部都使用下面这种方式引入路由组件，那么所有组件都打包在一个js中，导致进入首页时，加载时间相对过长。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
import product from './pages/product';
export default new Router({
    routes:[
          {
            path:'/product',
            name:'product',
            component:product,}
]
});

那么如何优化性能呢？我们可以使用以下两种方式：

（1）使用require这种方式，只有访问这个路由时才会加载这个js.即就是把路由组件分别打包成不同的js，需要才加载。

{
    path:'/product',
    name:'product',              
    component:resolve=>require(['./pages/product.vue'],resolve)
                }

（2）使用syntax-dynamic-import，但是必须先安装，因为import是es7语法。

cnpm install --save-dev @babel/plugin-syntax-dynamic-import

接下来在路由中使用：

               
{
    path:'/product',
    name:'product',              
    component:() => import('./pages/product.vue')
 }

使用上面的按需加载办法来优化项目就可以了吗？打开控制台我们可以发现打包的js文件，是以link的方式一次性全部预加载进来：

这样跟没有按需加载好像也没什么太大的区别。那怎样避免这个问题，实现真正的按需加载呢？

在vue,config.js中配置chainwebpack，来删除预加载。

chainwebpack:(config)=>{
   config.plugins.delete('prefetch');
}

下面是其他的前端性能优化方法？
1.将图片转化成base64,使用tinypng.com
2.cdn首先是一台加速服务器，可以做缓存、分流。