vue性能优化

1，异步组件 resolve =>{require([], resolve)}
2, 路由懒加载 resolve =>(require([], resolve))
3, 图片懒加载 lazy-load
4, cdn引入第三方库：CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间

将cdn库下载到本地引入（element本地引入js,css图标不显示）：https://www.cnblogs.com/hanhanours/p/11942762.html

5，按需引入
6，gzip压缩

 

vscode开发
less: 4.1.1
less-loader: 4.1.0
build中的webpack.base.conf.js的module中的rules添加
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}

elment-ui按需引入
npm install babel-plugin-component -D
修改 .babelrc为
{
"presets": [
["es2015", { "modules": false }],
"stage-2" // es6兼容es5
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
npm install babel-preset-es2015 --save-dev

vant按需引入
npm i vant -S npm i babel-plugin-import -D
修改 .babelrc为
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]