优化vue项目
1.项目优化策略
1.生成打包报告
2.第三方库启动CDN
3.Element-UI 组件按需加载
4.路由懒加载
5.首页内容定制
一,添加加载条
使用第三方插件(nprogress):
https://hub.fastgit.org/rstacruz/nprogress
https://github.com/rstacruz/nprogress
//安装依赖
$ npm install --save nprogress
//导入 NProgress 包对应的JS 和 CSS
//导入nprogress添加进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//展示进度条
NProgress.start();
//隐藏进度条
NProgress.done();
本项目将两个函数放到了拦截其中
二,解决ESLink语法错误。
- 驼峰命名
- 没用的变量或数据
- 代码格式
三,在执行Build命令的时候,关闭所有的console
使用第三方插件:babel-plugin-transform-remove-console
https://www.npmjs.com/package/babel-plugin-transform-remove-console
//安装依赖
npm install babel-plugin-transform-remove-console --save-dev
四,只在发布阶段才移除所有的console
思路:
发布阶段:mode:production
开发阶段:mode:development
具体实现:
五,生成打包报告
为了打包时,直观的发现项目中存在的问题,可以在打包时生成报告:(两种方式)
方式一:命令行参数
//通过vue-cli 的命令选项
//--report选项可以生为report.html 以帮助分析包内容。
vue-cli-service build --report
方式二:UI面板直接查看
在可视化的UI面包中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。
六,通过vue.config.js修改webpack的默认配置
通过vue-cli3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,为了程序员把重心放在具体功能和业务逻辑上。
配置方法:
在根目录下创建vue.config.js 配置文件
对项目的打包发布过程做自定义的配置
配置参考:https://cli.vuejs.org/zh/config/#vue-config-js
// vue.config.js
/**
* @type {import('@vue/cli-service').ProjectOptions}
* 这个文件中,应该导出一个包含了自定义配置选项的对象(向外暴露)
*/
module.exports = {
// 选项...
}
七,为开发模式和发布模式指定不同的打包入口
默认情况下:Vue项目的 开发模式 和 发布模式,
共用同一个打包入口文件(src/main.js)。
为了将 开发过程 和 发布过程 分离。
为两种模式,指定各自的入口文件:
- 开发模式: src/main-dev.js
- 发布模式: src/main-prod.js
configureWebpack 和 chainWebpack的比较:
通过chainWebpack自定义打包入口
代码如下:
module.exports = {
chainWebpack: config => {
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
})
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
八,通过externals加载外部CDN资源
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。
程序在打包之前,webpack会先检查externals中是否声明了一些第三方的依赖包,打包的时候webpack就不会打包这些依赖打包在其中。而当用到这些声明的依赖包的时候,先去全局的window包中获取
1.在vue.config.js中配置externals节点。
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
2.同时还是需要在:public/index.html文件头部,添加如下的CDN资源引用。
3.添加js引用。(可以去bootCDN:检查版本号:https://www.bootcdn.cn/)
九,通过CDN优化ElementUI的打包
开发用import访问自己的资源快,发布之后体积大又会慢,所以使用CDN。
十,首页内容自定制
十一,路由懒加载
PS : vue cli3 已经内置了懒加载了.
当打包构建项目时 , JavaScript包会变得非常大 , 影响页面加载 .
解决方法:
把不同路由对应得组件分割成不同的代码块 , 然后当路由被访问得时候才加载对应组件.
红色 : 路由组件得存放路径
注释 : 用来路由分组的 , 相同的分组打包到了同一个js包.
具体步骤:(可参考)
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html