Vue首屏优化方法、CDN加速

最新推荐文章于 2024-07-10 17:19:51 发布

叽叽复饥饥

最新推荐文章于 2024-07-10 17:19:51 发布

阅读量826

点赞数

分类专栏：前端 JavaScript 编程文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_43750480/article/details/108047539

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

编程

8 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

简单的性能优化的方法

1.减少接口的请求次数
2.将图片压缩，或者把图片或视频等静态资源通过网络形式请求，如上传到OSS
3.插件按需引入
4.图片懒加载
5.限制首屏的请求资源数量
6.CDN加速
等等等等。。。

查看依赖包的大小

当项目做完以后，在package-json中,build的后面加上 --report,如下面所示

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report"
  },

在运行npm run build/yarn build打包项目之后，可以在dist文件夹中看到report.html文件，然后在浏览器中打开这文件，就可以看到你项目中所依赖的各个包的大小，一般做Vue项目，都会使用到ElementUI,关于ElementUI的按需引入，可以达到减小项目体积的效果，在官方文档中也有描述，点击这里跳转 ElementUI按需引入查看官方文档的介绍

ElementUI按需引入（这里使用Vue-cli 4.0以上版本）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后在babel.config.js文件中做如下修改

module.exports = {
  "presets": [
    '@vue/app',
    // '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这样再重新运行npm run build打包之后可以再看看elementUI的依赖大小是不是变小了点

CDN加速

在Vue-cli 4，需要自己做配置，在项目的根目录中新建一个vue.config.js文件
写入如下的代码，比如说，我在项目中想通过CDN的形式引入这些依赖，就可以在这里做相应的配置，我下面的写的这些依赖是想通过CDN的形式进行载入，然后在进行首屏载入的时候就会去请求相应的CDN地址

module.exports = {
  publicPath: './',
  chainWebpack: config => {
    // 在这里设置 需要cdn的依赖和插件
    config.set('externals', {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: "axios",
      'moment': "moment",
      'element-ui': 'ELEMENT'   //这里必须要大写
    });
    //这是一个方法,对config进行了操作之后必须要return出来
    return config
  },
};

在这里写完之后，我们去到public文件夹里面的`index.html``文件，进行cdn地址的导入，这里推荐一个免费的CDN网站 BootCDN

然后我们在index.html的head标签中可以引入如下的cdn地址，记住版本号要跟自己package.json中安装依赖时的版本号一致，在pakage.json的"dependencies"查看依赖版本号

  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "element-ui": "^2.4.5",
    "moment": "^2.27.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

看完版本号，我们再去BootCDN中搜索到对应的版本的cdn地址，然后像下面这样引入就好了

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <meta name="baidu-site-verification" content="7XGPmF2RtW" />
    <title>前端学习</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.4.5/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
  </head>