前端Vue之性能优化全方案(详解nginx配置gizp等等)

Sing前端-悟空

已于 2023-05-18 13:33:21 修改

阅读量651

点赞数 1

文章标签： nginx vue.js 前端性能优化

于 2023-04-14 11:16:27 首次发布

本文链接：https://blog.csdn.net/xiaoleiv9/article/details/130147530

版权

一、UI组件按需引入

借助 babel-plugin-component 插件 npm install babel-plugin-component -D

创建plugins/element.js 文件夹作为UI组件的引入文件

import Vue from 'vue';

import {
  Option,
  Dialog,
  Dropdown,
  Input,
  Tooltip,
  Form,
  Row,
  Loading,
  MessageBox,
  Message,
  Table,
  FormItem,
  Icon,
  Button,
  Radio,
  Col,
  Upload,
  Progress,
  Badge,
  Carousel,
  CarouselItem,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  Checkbox,
  Switch,
  CheckboxButton,
  Select,
  TableColumn,
  Popover,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Card,
  Pagination,
  Autocomplete,
  MenuItemGroup,
  InputNumber,
  RadioGroup,
  RadioButton,
  OptionGroup,
  CheckboxGroup,
  ButtonGroup,
  DatePicker,
  TimeSelect,
  TimePicker,
  Breadcrumb,
  BreadcrumbItem,
  Alert,
  Slider,
  Cascader,
  Transfer,
  ColorPicker,
  CollapseItem,
  Collapse,
  Steps,
  Step,
  Rate,
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;

3、main.js中引入两个东西
import './plugins/element';
import './styles/theme/element-variables.scss';

二、 Vue 配置使用 externals 使用cdn减小打包体积

注意：修改完config文件重跑项目重新跑配置

1、vue.config.js 在module.exports对象里进行配置不需要进行打包的资源

2、在入口文件index.html中进行js引入 public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="./favicon.ico" />
    <title><%= webpackConfig.name %></title>
  </head>
  <script src="./mock/data.js"></script>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script src="./static/base.js"></script>
    <!-- 引入Vue.js -->
    <script
      crossorigin="anonymous"
      integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw=="
      src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"
    ></script>
    <!-- 引入vuex.js -->
    <script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
    <!-- 引入vue-router -->
    <script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

三、gzip压缩

启示录：正常我们打包完后，在打包的文件里，会生产出来js/css/html的文件夹，在js文件夹里面有几个以chunk开头的文件体积较大再加上 Vue的 SPA单页面应用导致首次加载较慢因为这些静态资源影响了速度所以我们要进行 js/css 压缩处理

①：先进行Vue.config的配置

1、打开vue.config 进行配置告诉webpack我们要处理什么文件

2、安装webpack插件 compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

3、引入插件

const CompressionWebpackPlugin = require('compression-webpack-plugin');

4、const 一个变量保存需要处理的文件后缀

const productionGzipExtensions = ['js', 'css'];

5、配置进去
 plugins: [
      // gzip压缩
      new MonacoWebpackPlugin(),
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240, // 超过10kb就压缩
        minRatio: 0.8,
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100,
      }),
    ],
主要代码：

②：nginx配置gzip

正常来说，你的nginx路径应该为 /etc/nginx

1、在nginx/中打开你要处理的那个项目入口

我的项目都在这里 conf.d 所以我要打开这个文件找我需要gzip压缩的项目

2、在server中写入以下代码

          gzip on; #开启gzip功能
	      gzip_types *; #压缩源文件类型,压缩所有
	      gzip_comp_level 6; #gzip压缩级别
	      gzip_vary on;  #往头信息中添加压缩标识
	      gzip_min_length 1k; #进行压缩响应页面的最小长度,content-length
	      gzip_http_version 1.1; #指定压缩响应所需要的最低HTTP请求版本
	      gzip_disable "MSIE[1-6]\.";  #对IE6以下的版本都不进行压缩
	      gzip_proxied off; #nginx作为反向代理不压缩服务端返回数据
	      gzip_buffers 4 16k; #缓存空间大小

重启nginx即可

效果图：

体积缩小了三分之二

四、图片处理

①：图片压缩 (我目前使用的也是我最推荐的方法之一简单方便)

有时候图片的资源太大了严重影响我们项目加载的速度所以图片压缩是完全有必要的

网上有很多图片处理的工具这里我推荐一个吧

在线图片压缩 - docsmall 在线图片压缩工具,在线图片压缩软件

我们图片处理完之后替换到项目上就可以啦

②：腾讯云 (把图片丢到腾讯云上) 使用腾讯云存储图片

我不太习惯这个方法感觉有点麻烦之前搞过一次我不写具体操作了 你们看这个文章吧

如何使用腾讯云存储图片_腾讯云图片存储_多多的小宝贝的博客-CSDN博客

③：精灵图/雪碧图/ 乱码七糟的这些处理也可以不过麻烦我不喜欢

五、其他Vue的性能优化

1、路由懒加载

2、v-if和v-for 避开使用避免重加载

3、图片资源懒加载 可以使用 Vue 的 vue-lazyload

4、v-if 和 v-show 区分使用场景

代码层次这方面的处理主要看个人咱们尽量书写优秀、高质量的代码避免冗余写代码的时候尽量多思考如何可以用更少更好的代码实现

Sing前端-悟空

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端Vue之性能优化全方案(详解nginx配置gizp等等)

正常我们打包完后，在打包的文件里，会生产出来js/css/html的文件夹，在js文件夹里面有几个以chunk开头的文件体积较大再加上 Vue的 SPA单页面应用导致首次加载较慢因为这些静态资源影响了速度所以我们要进行 js/css 压缩处理。1、vue.config.js 在module.exports对象里进行配置不需要进行打包的资源。我的项目都在这里 conf.d 所以我要打开这个文件找我需要gzip压缩的项目。1、在nginx/中打开你要处理的那个项目入口。
复制链接

扫一扫