vue项目的优化

1.生成打包报告

2.第三方库启用CDN

3.Element-UI组件按需加载

4.路由懒加载

5.首页内容定制

1.页面顶部的进度条效果

使用nprogress包，在github上找到安装方法进行包的安装（npm install --save），或者在vue可视化界面上选择安装依赖，安装运行依赖

2.build阶段需要去掉console.log

安装babel-plugin-transform-remove-console插件到开发依赖

3.生成打包报告

可视化UI，build控制台和分析可以

其中element-Ui，Echarts等依赖项比较大，一共2M

4.创建vue.config.js

配置webpack，chainWebpack、configWebpack

5.通过externals加载外部CDN资源

第三方依赖包，最终被打包合并到一个文件中去，使得文件体积过大

凡事在webpack的externals节点中声明的第三方依赖包，都不会被打包

vue.config.js中配置externals，当需要引入的时候直接在window中查找

在public/index.js中通过link herf导入一些第三方的样式表或者通过script src加载第三方库

开放静态文件 CDN服务staticfile.org

优化完成后大概300K

6.路由懒加载

安装@babel/plugin-syntax-dynamic-import

在babel.config.js配置文件中声明该插件

将路由改为按需加载

const Foo=()=>import(/*webpackChunkName:group-foo*/'./component/Foo.vue')
组件名称                  分组                                    真实路径

一个组的会被一同加载，不在一个组的不会一同加载

项目的发布上线

1.创建node服务器

创建node服务器，安装express 

通过express创建服务器

再把vue打包生成的dist文件夹托管为静态资源

2.开启gzip压缩

安装compression

3,配置https

http是明文传输，https是加密传输

4.使用pm2管理