Vue2.x项目开发完成后进行调优

2021-07-11 16:02:53 阅读：247 来源： 互联网

标签：babel app js 开发 Vue2 调优 main config nprogress

vue2x项目调优

1.项目优化策略

1.1. 加进度条动画

1.github搜索nprogress

2.安装nprogress

$ npm i nprogress -S

3,配置main.js

// 1、导入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2、使用,在请求开始的时候
axios.interceptors.request.use((config) => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem("token")
  // 在最后必须 return config
  return config
})

3、使用,在请求结束收尾的时候
axios.interceptors.response.use((config) => {
  NProgress.done()
  return config
})

4.serve看效果

进度条

1.2.生产环境下移除所有log函数

1.安装依赖

$ npm i babel-plugin-transform-remove-console -D

2.babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "transform-remove-console",
  ]
}

就是这样,但是这样你开发的时候也没得看报错了

3.优化前面的babel配置

// 1.定义生产环境的插件数组,只在生产环境下生效
const ProdPlugins = []
if (process.env.NODE_ENV === 'production') {
  ProdPlugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 2.发布产品的插件数组
    ...ProdPlugins
  ]
}

1.3.生成项目打包报告

打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:

1.命令行参数

$ vue-cli-service build --report

2.通过可视化的uiWeb面板查看报告(推荐)

在可视化的U面板中,通过控制和分析面板,可以方便地看到项目中所存在的问题。

1.4.写vue.config.js修改webpack配置

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

1.5.main-dev.js和main-pro.js

开发模式的入口文件为main-dev.js
发布模式的入口文件为src/main-prod.js
ConfigureWebpack 和 chainWebpack

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

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

chainWebpack通过链式编程的形式,来修改默认的webpack配置
configureWebpack通过操作对象的形式,来修改默认的webpack配置

1.通过 chainWebPack自定义打包入口

module.exports = {
  chainWebPack: (config) => {
    config.when(process.env.NODE_ENV === 'production', (config) => {
        config.entry('app').clear().add('./main-pro.js')
    })
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./main-dev.js')
    })
  }
}

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

默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题, 项目优化,就要打包单文件体积越小越好!!!

同时,需要在public/index.html文件的头部,添加如下的CDN资源引用:

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-pro.js')

      // externals加载外部CDN
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        nprogress: 'NProgress',
        'mavon-editor': 'mavonEditor'
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

1.先在ui环境下build一下看看单文件大小

我们看着完全没有优化的单文件体积为 680kb

2.开始优化

就是依赖库的 js和css依赖, 用传统的方法导入 public/index.html

再跑一下,

变成500kb, 还是有感叹号,那是因为element-ui还是用npm导入的,占了580kb

同样的,在public/index.html导入jscss

再跑一下,

变成150kb

1.7.首页内容根据环境定制

不同的打包环境下,首页内容可能会有所不同。我们可以通过插件的方式进行定制,插件配置如下:

需求: 开发环境我们的title是 DEV-电商, 发布环境是电商管理系统

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {

			// 根据环境渲染定制化内容
			config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })


    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {

      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
      
    })
  }
}

在public/index.html中使用

  <!-- 按需要渲染页面的标题 -->
  <title><%= htmlWebpackPlugin.options.title ? '' : 'DEV-' %>电商管理系统</title>
  <!-- 按需要加载外部的CDN资源 -->
  <% if(htmlWebpackPlugin.options.isProd) { %>
    <!-- <script src="cdn.js"> -->
    <% } %>

1.8.VueRouter懒加载

当打包构建项目时, JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

1.安装@babel/plugin-syntax-dynamic-import包

$ npm i babel/plugin-syntax-dynamic-import -D

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

moodule.exports = {
	plugins: [
		...prodPlugins,
		// 声明该插件。
		'@babel/plugin-syntax-dynamic-import',
	]
}

将路由改为按需加载的形式,示例代码如下(router/index.js):

2.项目上线相关配置

### 2.1 通过 node 创建 web 服务器

$ cd Desktop

$ mkdir WebApps

$ cd WebApps

$ mkdir hg && cd hg

$ npm init -y

$ npm i express -S

1.创建app.js文件

const express = require('express')

const app = express()

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

app.listen(3980, () => {
  console.log('hg at  http://localhost:3980');
})

node app.js

2.2 开启 gzip 配置

使用gzip可以减小文件体积,使传输速度更快。
可以通过服务器端使用Express做gzip压缩。其配置如下:

$ npm i compression -D

// usage
const compression = require('compression')
// 启用压缩中间件
app.use(compression())

一定要写在: app.use(express.static('./dist')) 之前!!!

f12优化效果

2.3 配置 https 服务

None

2.4 使用 pm2 守护运行项目

1,安装pm2

$ npm i pm2 -g

2,启动项目:

$ pm2 start  app.js --name 自定义应用起名

3, 查看运行项目

$ pm2 ls

4, 重启项目

$ pm2 restart 自定义应用名称

5.停止项目

$ pm2 stop 自定义应用名称

6,删除项目

$ pm2 delete 自定义应用名称

标签：babel,app,js,开发,Vue2,调优,main,config,nprogress
来源： https://www.cnblogs.com/diygou/p/14998736.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9