项目要上线了–该怎么优化

实现步骤：
A.生成打包报告，根据报告优化项目
B.第三方库启用CDN
C.Element-UI组件按需加载
D.路由懒加载
E.首页内容定制

发布阶段清除console.log信息

上线的产品不应该在控制台上有console.log打印

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console.log信息 全局共享 所以要区别开发阶段与发布阶段

• 打开项目中的babel.config.js，编辑代码如下：

• process.env.NODE_ENV可以拿到对应的模式

  • production发布阶段

    

  • development 为开发阶段

    

在babel.config.js中声明该插件。

//项目发布阶段需要用到的babel插件
const productPlugins = []
​
//判断是开发还是发布阶段 production为发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}
​
module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
   //将数组中的插件扩展
    ...productPlugins
  ]
}
复制代码

生成打包报告

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

0. 通过命令行参数的形式生成报告

   //通过 vue-cli的命令选项可以生成打包报告
   // --report选项可以生成 report.html以帮助分析包内容
   vue-cli-service build --report
   复制代码

1. 通过可视化的UI面板直接查看报告

   在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题
   点击“任务”=>“build”=>“运行”
   运行完毕之后点击右侧“分析”，“控制台”面板查看报告
   复制代码

修改webpack配置

在项目根目录中创建vue.config.js文件

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack 需要通过vue.config.js来配置。（具体配置参考 cli.vuejs.org/zh/config/#…）

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

为开发模式与发布模式配置不同的打包入口

为什么需要配置两个打包入口？==》为了将项目的开发过程和发布过程分离

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

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

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

configureWebpack 和 chainWebpack的区别

在 vue.config.js 导出的配置对象中 configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同：

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

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

两者具体的使用差异，可参考如下网址： cli.vuejs.org/zh/guide/we…

通过 chainWebpack 自定义打包入口

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。配置代码如下

  config.set('externals', {
           vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          lodash: '_',
          echarts: 'echarts',
          nprogress: 'NProgress',
          'vue-quill-editor': 'VueQuillEditor'
  })
  复制代码

0. 在vue.config.js 加入上述代码

   module.exports = {
       chainWebpack:config=>{
           //发布模式
           config.when(process.env.NODE_ENV === 'production',config=>{
               //entry找到默认的打包入口，调用clear则是删除默认的打包入口
               //add添加新的打包入口
               config.entry('app').clear().add('./src/main-prod.js')
   ​
               //使用externals设置排除项
               config.set('externals',{
                   vue:'Vue',
                   'vue-router':'VueRouter',
                   axios:'axios',
                   lodash:'_',
                   echarts:'echarts',
                   nprogress:'NProgress',
                   'vue-quill-editor':'VueQuillEditor'
               })
           })
           //开发模式
           config.when(process.env.NODE_ENV === 'development',config=>{
               config.entry('app').clear().add('./src/main-dev.js')
           })
       }
   }
   复制代码

1. 在入口文件main-prod.js,删除默认的引入代码（之前将main.js入口文件,复制成两份，main-prod.js属于发布阶段和main-dev.js属于开发阶段

   例如：删除引入的 js和css

   // import './plugins/element.js'
   //导入字体图标
   import './assets/fonts/iconfont.css'
   //导入全局样式
   import './assets/css/global.css'
   //导入第三方组件vue-table-with-tree-grid
   import TreeTable from 'vue-table-with-tree-grid'
   //导入进度条插件
   import NProgress from 'nprogress'
   //导入进度条样式
   // import 'nprogress/nprogress.css'
   // //导入axios
   import axios from 'axios'
   // //导入vue-quill-editor（富文本编辑器）
   import VueQuillEditor from 'vue-quill-editor'
   // //导入vue-quill-editor的样式
   // import 'quill/dist/quill.core.css'
   // import 'quill/dist/quill.snow.css'
   // import 'quill/dist/quill.bubble.css'  
   复制代码

2. 然后打开public/index.html添加对应CDN引入代码

     <!-- nprogress 的样式表文件 -->
       <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
       <!-- 富文本编辑器 的样式表文件 -->
       <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
       <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
       <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
       <!-- element-ui 的样式表文件 -->
       <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
   ​
       <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
       <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
       <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
       <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
       <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
       <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
       <!-- 富文本编辑器的 js 文件 -->
       <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
   ​
       <!-- element-ui 的 js 文件 -->
       <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
   ​
   复制代码

   根据开发与发布环境展示不同的内容

如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现

0. 我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

   module.exports = {
       chainWebpack:config=>{
           //发布模式
           config.when(process.env.NODE_ENV === 'production',config=>{
               ......
               
               //使用插件
               config.plugin('html').tap(args=>{
                   //添加参数isProd
                   args[0].isProd = true
                   return args
               })
           })
          //开发模式
           config.when(process.env.NODE_ENV === 'development',config=>{
               config.entry('app').clear().add('./src/main-dev.js')
   ​
               //使用插件
               config.plugin('html').tap(args=>{
                   //添加参数isProd
                   args[0].isProd = false
                   return args
               })
           })
       }
   }
   复制代码

1. 用 <% { = htmlWebpackPlugin.options.isProd } %> 可以拿到 isProd的参数 在配合三元表达式 判断是false 还是true

2. 通过 if 判断的方式来决定用CDN方式还是import的加载方式

   if 判断 语法 <% if(htmlWebpackPlugin.options.isProd){ % > 这里放CDN方式的引入 <% }%>

   ​
   <% if (htmlWebpackPlugin.options.isProd){ %>
       <!-- nprogress 的样式表文件 -->
       <link rel="stylesheet"   href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
       ........
       <!-- element-ui 的 js 文件 -->
       <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
       <% } %>
   复制代码

路由懒加载

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

具体需要3步：

① 安装 @babel/plugin-syntax-dynamic-import 包。

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

③ 将路由改为按需加载的形式，示例代码如下：

const 路由对应的组件 =()=> import（/* 路由分组: "名称" */ ‘’‘路由路径’）

同一个分组的路由会将对应的组件打包到同一个js文件中，在请求Foo组件时同时也会请求Bar组件，同理请求Bar组件也会请求Foo组件

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
​
复制代码

关于路由懒加载的详细文档，可参考如下链接： router.vuejs.org/zh/guide/ad…

0. 在babel.config.js中声明该插件，打开babel.config.js

   //项目发布阶段需要用到的babel插件
   const productPlugins = []
   ​
   //判断是开发还是发布阶段
   if(process.env.NODE_ENV === 'production'){
     //发布阶段
     productPlugins.push("transform-remove-console")
   }
   ​
   module.exports = {
     "presets": [
       "@vue/app"
     ],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ],
         
        //将数组中的插件扩展
       ...productPlugins,
       //配置路由懒加载插件
       "@babel/plugin-syntax-dynamic-import"
     ]
   }
   复制代码

1. 将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

   组件分组名为 Login_Home_Welcome

import Vue from 'vue'
import Router from 'vue-router'
​
// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
​
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
​
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue')
复制代码

开启gzip压缩

开户gzip压缩===》甩锅给后端 。。。。哈哈

使用 gzip 可以减小文件体积，使传输速度更快。

0. 输入命令 ：npm i compression -D 安装相应的包

1. 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

   • // 安装相应包 npm install compression -S
   • // 导入包 const compression = require(‘compression’)
   • // 启用中间件 app.use(compression())

const express = require('express')
//1.导入gzip压缩插件
const compression = require('compression')
​
//创建web服务器
const app = express()
// 2.启用中间件
app.use(compression())
​
//托管静态资源
app.use(express.static('./dist'))
​
//启动web服务
app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})
复制代码

\