vue项目优化策略

一、vue项目优化策略

1、生成打包报告

2、第三方库启动CDN

3、element-ui 组件按需加载

4、路由懒加载

5、首页内容定制

优化1：通过nprogress添加进度条效果

安装插件：npm install --save nprogress

使用方式：

       NProgress.start()

       NProgress.done()

在main.js中导入NProgress

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

在main.js中添加两个拦截器

//在request拦截器中，展示进度条NProgress.start()
axios.interceptors.request.use(config => {
    NProgress.start()
    config.headers.Authorization = window.sessionStorage.getItem('token')
    //在最后必须 return config
    return config
})
// 在response拦截器中，隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
    NProgress.done()
    return config
})

优化2：在执行build过程中移除所有的console

使用babel-plugin-transfrom-remove-console插件，来移除所有的console，打开npm相关的官方网页，学习使用

只在发布阶段移除console，在babel相关的配置文件中进行修改

优化3：生成打包报告

为了直观的看到项目的问题

方式1：手动运行打包命令 --report选项可以生成report.html以帮助分析包内容

vue-cli-service build --report

方式2：通过可视化的UI面板直接查看报告（推荐）

在可视化的UI面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题

同时也需要将依赖项的体积变得更小一点

优化项目的打开速度

优化资源

优化4：通过vue.config.js修改webpack的默认配置

通过vue-cli3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考https://cli.vuejs.org/zh/config/#vue-config.js）

// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
    // 选项。。。。
}

为开发模式与发布模式指定不同的打包入口

默认情况下，vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js），为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

（1）开发模式的入口文件为    src/main-dev.js

（2）发布模式的入口文件为    src/main-prod.js

configureWebpack 和 chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。

在这里，configWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack 的配置方式不同。

（1）chainWebpack通过链式编程的形式，来修改默认的webpack配置

（2）configureWebpack通过操作对象的形式，来修改默认的webpack配置

两者具体的使用差异，

参考网站https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

在vue.config.js下填写如下内容

优化5：通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

配置信息如下，只有在发布模式下才有必要进行修改

同时进行如下操作，将main.js中的css删除掉，同时在index.html中引入这几个css样式

通过CDN优化elementui打包

 

优化5：首页内容定制

优化6：路由的懒加载

通过webpackChunkName进行组件的分组，打包到一个文件中

使用node部署上线

1、通过node创建Web服务器

新建一个项目serve文件夹，进入文件夹，依次执行以下命令

npm init -y

npm i express -S

将打包生成的文件拷贝到serve目录里面

在serve目录里面新建app.js文件，入口文件

入口文件中写入

const express = require('express')
const app = express()

app.use(express.static('./dist'))

app.listen(80,()=>{
    console.log('server running at http://127.0.0.1')
})

执行node .\app.js

 

2、上线-开启文件的Gzip网络传输压缩

3、配置HTTPS

 

4、上线-使用pm2管理应用

在开启网站后，关闭终端，也可以照常访问

实例