项目上线优化

使用vue图形化管理工具

vue ui

生成打包报告

// 通过 vue-cli 的命令选项可以生成打包报告

// --report 选项可以生成 report.html 以帮助分析包内容

package.json页面

第三方库启用CDN

ElementUI组件按需加载

cdn链接 直接在public文件夹下的index.html里引入

  <% if(htmlWebpackPlugin.options.isProd){%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.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>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>
  <% } %>

在src文件夹下新建一个main-dev.js和main-prod.js 入口文件

• 在main-prod.js中，注释掉element-ui按需加载的代码
• 在index.html的头部区域中，通过CDN加载element-ui的js和css样式

修改打包入口文件

vue.config.js文件，用来修改webpack的配置项

configureWebpack和chainWebpack，来自定义webpack的打包配置

configureWebpack和chainWebpack的作用完全相同

• configureWebpack：通过操作对象的形式来修改入口文件
• chainWebpack：通过链式编程的形式来修改入口文件

//vue.config.js 文件
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");
    });
  },
}

引入外部CDN

在开发环境下，通过import来引入依赖。

在生产环境下，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积。

//vue.config.js 文件
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({

  chainWebpack: (config) => {
    //生产模式
    config.when(process.env.NODE_ENV == "production", (config) => {
      config.entry("app").clear().add("./src/main-prod.js");
      
    	//设置一个全局变量，在index.html中用来区分生产环境和开发环境
      config.plugin("html").tap((args) => {
        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) => {
        args[0].isProd = false;
        return args;
      });
    });
  },
});

//public/index.html 添加判断
<% if(htmlWebpackPlugin.options.isProd){%>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/esm/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.prod.min.js"></script>

<% } %>

开启gzip压缩

使用gzip减少文件体积，使传输速度更快

可以通过服务器端使用express做gzip压缩，其配置如下：

• npm install express
• 服务器端安装包 npm i compression -D
• 导入包 const compression=require("compression");
• 启用中间件 app.use(compression())

//app.js
const express=require("express")
const compression=require("compression")
const app=express()

app.use(compression())      				//这个在前
app.use(express.static('./dist'))		//这个在后

app.listen(80,()=>{
  console.log("正在运行3000")
})