Vue构建的页面怎么提高首屏渲染以及性能优化

2021-05-12  本文已影响0人  伟笑_552f

分析打包出来的文件

安装webpack-bundle-analyzer这个插件,然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件的大小,有针对性的进行模块化拆分

路由懒加载

在 router.js文件中，原来的静态引用方式，如

import ShowBlogs from '@/components/ShowBlogs';
 
routes: [(path: 'Blogs'), (name: 'ShowBlogs'), (component: ShowBlogs)];

如果是在 vuecli 3中，我们还需要多做一步工作 因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了

所以我们要关闭这个功能，在 vue.config.js中设置:

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 移除prefetch插件
    config.plguins.delete('prefetch');
 
    // 或者
    // 修改它的选项
    config.plugin('prefetch').tap((options) => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/);
      return options;
    });
  },
};

一些 UI 框架按需加载,不要整个的引入

这里以饿了么 ui 为例：

原本的引进方式引进了整个包

import ElementUI from 'element-ui';
Vue.use(ElementUI);

如果只用了按钮,表单,分页，表格,提示等更改为

import {
  Button,
  Input,
  Pagination,
  Table,
  TableColumn,
  MessageBox,
} from 'element-ui';
Vue.use(Button);
Vue.use(Input);
Vue.use(Pagination);
Vue.prototype.$alert = MessageBox.alert;

注意 MessageBox注册方法的区别，虽然用到了alert，但并不需要引入 Alert组件

在.babelrc / babel.config.js文件中添加（vue-cli 3要先安装 babel-plugin-component)

plugins: [
  [
    'component',
    {
      libraryName: 'element-ui',
      styleLibraryName: 'theme-chalk',
    },
  ],
];

gzip 压缩

安装 compression-webpack-plugin

cnpm i compression-webpack-plugin -D

在 vue.congig.js中引入并修改 webpack配置

const CompressionPlugin = require('compression-webpack-plugin')
 
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

注意:在服务器也要做相应的配置，如果发送请求的浏览器支持 gzip，就发送给它gzip格式的文件 如果服务器是用express框架搭建的 只要安装一下 compression就能使用,其他也类似

const compression = require('compression');
app.use(compression()); // 要放在所有其他中间件注册之前

除了上面的还有以下细节：

上一篇 下一篇

猜你喜欢

热点阅读