016、Vue-启动优化-压缩、CDN、懒加载

原创已于 2023-12-16 22:11:50 修改 · 662 阅读

1 ·

CC 4.0 BY-SA版权

文章发表1周内为内容优化高峰期，后续会根据认知迭代继续做完善补充。

文章标签：

#vue.js #javascript #前端

于 2022-11-07 20:35:43 首次发布

vue.js 专栏收录该内容

18 篇文章

订阅专栏

0、客户端CPU性能

因为Vue资源下载后需要浏览器渲染，所以客户端电脑性能本身会非常影响性能。

1、查看 report.html

Vue 查看 report.html

2、Vue 优化

2.1、启动 gzip 压缩

此方法需要借助 nginx 的功能，这种方式一般能优化一半的性能。
编译打包后，通过 nginx 访问即可。

2.1.1、安装 compression-webpack-plugin 插件

安装这个低版本就行

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

2.1.2、修改 config/index.js

# 第一步 新增
const CompressionWebpackPlugin = require('compression-webpack-plugin')

#第二步，修改 build 模块
build: {
    productionSourceMap: false,
    productionGzip: true,
    }
# 第三步 修改 module.exports 模块
module.exports = {
    //打包压缩
    configureWebpack: config => {
      if (process.env.NODE_ENV === "production") {
        return {
          // gzip压缩
          plugins: [
            new CompressionWebpackPlugin({
              algorithm: 'gzip', // 使用gzip压缩
              test: /.js$|.html$|.css$/, // 匹配文件名
              filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
              minRatio: 1, // 压缩率小于1才会压缩
              threshold: 10240, // 对超过10k的数据压缩
              deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            })
          ]
        }
      }
    },
  },

2.1.3、修改 nginx 开启 gzip

2.2、nginx开启 gzip

2.2、router 修改为懒加载

预加载模式

import HelloWorld from '@/components/HelloWorld'
 routes: [
    {
      path: '*',
      name: '默认页面',
      component: HelloWorld
    }
  ]
})

懒加载模式 import 修改为 resolve

方式1：在引用处声明

命中路由规则才会加载

//注释掉 import
//import HelloWorld from '@/components/HelloWorld'
export default new Router({
  routes: [
    {
      path: '*',
      name: '默认页面',
      component: (resolve) => require(['@/components/HelloWorld'],resolve),
    }
  ]
})

2.3、 ES 提出的import方法（推荐使用）

const HelloWorld = （）=>import('需要加载的模块地址') （不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = () => import('@/components/HelloWorld')
export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

2.4、CDN 加速

2.4.1、直接写死的demo

2.4.1.0、CDN 网站选择

登录他们的主页进行搜索即可

推荐-一般这俩就够用了
jsdelivr	https://www.jsdelivr.com

bootcdn	https://www.bootcdn.cn

staticfile	https://www.staticfile.org

2.4.1.1、在 index.html 中添加 js/css 引用

注意保持特定的版本[package.json]，CDN 的要义就是从网络环境获取特定 js/css 资源

<head>
   <!-- built files will be auto injected -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-theme-chalk@2.15.14/lib/index.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/muse-ui@3.0.2/dist/muse-ui.min.css">
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="stylesheet"/>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js" rel="stylesheet" type="text/javascript" ></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js" rel="stylesheet" type="text/javascript"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
  </head>

2.4.1.2、修改conf/index.js

module.exports 内增加以下内容

module.exports = {
  //CDN
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      //'querystring': 'Qs',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      //'MuseUI': 'MuseUI',
      'axios': 'axios',
      //'jquery': "jQuery",
      //"EXIF": 'EXIF',
      //'echarts': 'echarts',
      'mockjs': 'Mock'
    },
  },
 }

2.4.1.3、Vue.use(插件名)[注意CND场景下插件名和 import 不同]

CND 引入的话，不用 import 插件，但是需要 Vue.use（插件），需要注意的是，插件名有一个映射关系，上面 externals

//左边 是 import 方式的名字，右边是CDN方式直接 Vue.use 的名字
'vue': 'Vue',
'querystring': 'Qs',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    'MuseUI': 'MuseUI',
    'axios': 'axios',
    'jquery': "jQuery",
    "EXIF": 'EXIF',
    'echarts': 'echarts'

比较来理解：在 mian.js 中下面两种写法等效

//非CDN方式
import ElementAAA from 'element-ui'
Vue.use(ElementAAA )

//CDN方式,必须固定为Element ，其它插件也一样
Vue.use(Element )

2.4.2、 CDN 方式使用 Element

Vue 实例

现在 main.js 声明

import {
  Message
} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.prototype.$message = Message;

然后在 Vue 实例中使用

this.$message.success("success")

Js 中

ELEMENT.Message.success("success");

完整版

//import {Message} from 'element-ui';
//const ELEMENT = require('ELEMENT');

const showMessage = Symbol('showMessage')
class JavaboyMessage {
    [showMessage](type, options, single) {
        // if (single) {
        //     if (document.getElementsByClassName('el-message').length === 0) {
        //         Message[type](options)
        //     }
        // } else {
        //     Message[type](options)
        // }

        ELEMENT.Message[type](options);
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
}
export const mymessage = new JavaboyMessage();

参考

https://blog.youkuaiyun.com/mzl87/article/details/113618488
https://blog.youkuaiyun.com/qq_34191778/article/details/126202249
https://www.jb51.net/article/255344.htm
https://developer.aliyun.com/article/1068057
https://blog.51cto.com/u_13028258/5754108