Vue上线优化

用户7248766992919
142 阅读4分钟

打包命令 npm run build

vue图形化管理工具

打开图形化管理工具的命令 vue ui ，可以在里面查看依赖的大小和启动项目，打包文件等

生成打包报告

在package.json中的scripts对象中写入 "report": "vue-cli-service build --report"

优化

  • 优化 ElementUI
  • 修改打包入口文件
  • 第三方依赖启用CDN
  • 去除 console.log
  • 路由懒加载
  • 开启gzip压缩

1、 优化ElementUI

ElementUI组件按需加载

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

2 、修改打包入口文件

我们可以通过修改main.js里的内容来切换开发阶段和上线阶段，在开发阶段中我们使用impor导入ElementUI的框架和模块，而在上线阶段我们通过CDN来引入模块和框架还减小包的大小。 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");
    });
  },
}

3 、 第三方依赖启用CDN

BootCDN

官网:www.bootcdn.cn/

修改index.html文件

设置变量isProd

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

在生产环境下，不使用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;
      });
    });
  },
});

修改vue.config.js文件后一定要重启项目

使用变量isProd

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

/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>

<% } %>

3 、 第三方依赖启用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",
        "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");
    });
  },
}

4、去除项目中的 console.log

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

安装依赖后在babel.config.js中写入

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

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

5、路由懒加载

当我们项目较大时路由就会非常多，非常影响性能，我们可以使用懒加载的方法减小路由的大小，按需加载，实现懒加载需要三步

  • 1、首先下载依赖 @babel/plugin-syntax-dynamic-import
  • 2、在babel.config.js配置文件中声明该插件
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [...proPlugin,'@babel/plugin-syntax-dynamic-import'],
}
  • 3、将路由改为按需加载的形式
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

6、开启gzip压缩

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

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

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

创建app文件， 创建app.js写入下方的代码， 初始化命令：npm init ，下载依赖 express 和 compression 把打包好的dist文件夹拉到和app.js同级的目录中。

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

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

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

把写好的app文件拉取到宝塔的文件目录中后，添加node站点选择要访问的页面，启动选项使用自定义，写入node 文件的绝对路径，端口使用一个没有使用的端口，域名，有域名的话可以使用自己的域名，没有的话可以使用自己的本地端口号也可以。

在宝塔面板设置跨域

 location /api {    # 会将接口地址/api开头的全部替换文下边配置的地址
        proxy_pass https://www.thenewstep.cn/v1/vue3system/api;            #接口服务地址
    }

域名问题

我们有时可能遇到域名不起作用的情况，解决方法如下

域名在哪里买的就在那里解析

添加DNS解析 可以使用* 泛解析也可以添加需要的解析

以上就是上线优化的流程

avatar
文章
阅读
粉丝