最近项目发现了一个问题。页面每次刷新后加载速度都很慢，大概20s左右，但是很流畅，在开发环境中几乎察觉不到。本文是关于王山各种方案的优化

1.关闭打包过程中生成的地图文件

在config/index.js文件中，productionSourceMap设置为false，再次打包后没有映射文件

2.虚拟路由器路由很难加载

实现懒加载的方法有很多。这里有三种实现方式。

Vue异步组件

导入()

webpack的require . confirm()

Vue异步组件

Vue异步组件技术是异步加载，vue-router配置路由，veu异步加载技术可以实现按需加载，但是在这种情况下，一个组件产生一个js文件

/* vue异步组件技术*/

{

path: '/index '，

名称： '索引'，

component : resolve=require([' @/view/index ']，resolve)

}

使用导入复制代码

组件延迟加载的方案2

//下面2行代码没有指定webpackChunkName，每个组件都打包成一个js文件。

const Home=()=import(@/components/Home)

const Index=()=import(' @/components/Index ')

//下面两行代码指定了同一个webpackChunkName，将合并打包成一个js文件。将组件分组到块中

const Home=()=import(/* WebPACKchunk name : ' IMPORTFuncdemo ' */' @/components/Home ')

const Index=()=import(/* WebPACKchunk name : ' IMPORTFuncdemo ' */' @/components/Index ')

//路由器

{

路径： '/约'，

组件：关于

}, {

path: '/index '，

组件：索引

}

复制代码webpack的require . confirm()

按需加载也可以通过使用webpack的require.ensure()技术来实现。在这种情况下，指定相同chunkName的多个路由将被合并并打包到一个js文件中

/*组件惰性加载方案3要求。请确保()由： webpack提供*/

{

path: '/home '，

姓名： '家庭'，

component : r=require . assure([]，()=r(require('@/components/home '))，' demo ')

}, {

path: '/index '，

名称： '索引'，

component : r=require . confirm([]，()=r(require('@/components/index '))，' demo ')

}

复制代码CDN参考

CDN可以减少代码大小，加快请求速度。使用CDN主要解决两个问题：打包时间太长，打包后代码大小太大，请求速度慢，避免了服务器带宽问题

具体步骤

！DOCTYPE htmlhtml

头

meta charset='utf-8 '

title vue-管理-系统/标题

meta name=' viewport ' content=' width=device-width，initial-scale=1，minimal-scale=1，maximum-scale=1，user-scalable=no '

script src=' https://cdn . bootscs.com/vue/2 . 5 . 3/vue . js '/script

script src=' https://cdn . bootcss.com/vue-router/2 . 7 . 0/vue-router . min . js '/script

script src=' https://cdn . bootscs.com/axios/0 . 17 . 1/axios . min . js '/script

link rel='样式表' href=' https://cdn . bootcss.com/element-ui/2 . 4 . 0/theme-chalk/index . CSS '

script src=' https://cdn . bootcss.com/element-ui/2 . 4 . 0/index . js '/script

如果复制的代码提示Element未定义，那是因为Element依赖于Vue，而vue.js需要在element-ui之前引入，所以vue.js要改成cnd。

然后，在/build/webpack.base.conf.js中修改修改后的配置。将externals属性添加到module.exports中(详见https://webpack.docschina.org/configuration/externals/)，其中键在项目中被引用，值是被引用资源的名称。需要注意的是，资源名需要检查引用的JS源代码，看看全局变量是什么。例如，ELEMENT-ui的全局变量叫做ELEMENT

module.exports={

context : path . resolve(_ dirname，'./'),

入口： {

app :’。/src/main.js '

},

externals: {

vue': 'Vue '，

vue-router': 'VueRouter '，

ElementUI': 'ELEMENT '，

axios': 'axios '，

}

}

复制代码

然后删除原导入。如果原始导入未被删除，项目仍将从node_modules引入资源。

也就是说，如果不删除，npm运行build时引用的资源还是会打包在一起，生成的文件会大很多。更好删掉。