项目优化上线流程

使用vue图形化管理工具

vue ui

vscode格式化不换行

/.prettierrc 需要在根目录小找到prettierrc.js如果没有手动创建

{
  "semi":false,
  "singleQuote":true,
  "printWidth":200
}

批量移除console.log

安装依赖： npm i babel-plugin-transform-remove-console --save-dev

在babel.config.js下面引入

const proPlugins = [];
//如果是开发环境，则添加 transform-remove-console 插件
if (process.env.NODE_ENV== "production") {
  proPlugins.push("transform-remove-console");
}

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [...proPlugins],
};

ElementUI组件按需加载

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

修改index.html文件

设置变量isProd

在/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;
      });
    });
  },
});

使用变量isProd

通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在CDN文件。

在/public/index.html引入对应要压缩的内容:

<% if(htmlWebpackPlugin.options.isProd){%>
      <script src="https://cdn.jsdelivr.net/npm/vue@2"></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>
      <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<% } %>

第三方依赖启用CDN

在/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.set("externals", {
        vue: "Vue",
        axios: "axios",
        echarts: "echarts",
      });
    });
    config.when(process.env.NODE_ENV == "development", (config) => {
      config.entry("app").clear().add("./src/main-dev.js");
    });
  },
}

路由懒加载

在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.

也叫延迟加载，即在需要的时候进行加载，随用随载。

安装 @babel/plugin-syntax-dynamic-import包，进入@babel/plugin-syntax-dynamic-import · Babel (babeljs.io)进行下载
在babel.config.js配置文件中声明该插件

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [...proPlugins,'@babel/plugin-syntax-dynamic-import'],
  plugins: [...proPlugins]
}

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

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

开启gzip压缩

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

1、创建一个文件夹，然后文件夹里面创建一个app.js的文件，cmd打开黑窗口，输入命令：

npm init -y

在app.js文件下面放入以下代码：

const express = require("express");
const  compression = require("compression");

const app = express(); //这个在前
app.use(compression()) //这个在后
app.use(express.static('./dist'))
app.listen(30,()=>{
    console.log('30');
})

2、复制完之后在当前目录下面去下载命令 npm i express compression

3、下载完将我们npm run bulid打包好的dist文件拉入进来

4、在宝塔面板Node项目去添加，如果没有先配置版本，配置完成以后进入左侧的文件目录，创建文件然后把刚刚写好的文件和打包好的项目拉入进去

5、添加时项目名称不能为中文，切记不能空格或者逗号分隔，项目端口要和创建文件里面的端口一致，启动项目前面的node跟后面的路径空格隔开，在安全里面检测配置的端口号是否允许访问，不允许添加即可