vue前端性能优化之cdn的使用

最新推荐文章于 2024-03-07 17:23:33 发布

不cong明的亚子

最新推荐文章于 2024-03-07 17:23:33 发布

阅读量699

点赞数

分类专栏：性能优化 vue+element ui 前端文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_36579455/article/details/115177306

版权

前端同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

性能优化

5 篇文章 0 订阅

订阅专栏

vue+element ui

4 篇文章 0 订阅

订阅专栏

优化原因

项目中首页加载过慢，原因是js,css 静态资源第一次加载的时间长

vue.config.js

'use strict'
...

...
const cdn = {
  js_cdn: [
    'https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js',
    'https://unpkg.com/vue@2.6.10/dist/vue.js',
    'https://unpkg.com/vue-i18n@8.18.2/dist/vue-i18n.js',
    'https://cdn.staticfile.org/vue-router/3.0.6/vue-router.min.js',
    'https://cdn.staticfile.org/axios/0.18.1/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.js',
    'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
    'https://cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
    'https://unpkg.com/element-ui@2.13.0/lib/index.js',
    'https://cdn.jsdelivr.net/npm/echarts-liquidfill@2.0.6/dist/echarts-liquidfill.min.js',
    'https://unpkg.com/element-ui@2.15.1/lib/umd/locale/zh-CN.js',
    'https://unpkg.com/element-ui@2.15.1/lib/umd/locale/zh-TW.js',
    'https://unpkg.com/element-ui@2.15.1/lib/umd/locale/en.js'
  ],
  css_cdn: [
    'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
    'https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/theme-chalk/index.css'
  ],
  lang: true
}
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
// const port = process.env.port || process.env.npm_config_port || 8080 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  ..
  css: {
    ...
  },
  configureWebpack: {
   ....
  },
  chainWebpack(config) {
    ...
   ....

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => {
          config.devtool('cheap-source-map')
          config.entry('app').clear().add('./src/main.js')
        }
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config.entry('app').clear().add('./src/prod.js')
          config.set('externals', {
            vue: 'Vue',
            vuex: 'Vuex',
            'vue-router': 'VueRouter', // 必须是VueRouter，不然打包后运行会报错
            axios: 'axios',
            echarts: 'echarts',
            nprogress: 'NProgress',
            moment: 'moment',
            'vue-i18n': 'VueI18n'
          })
          config.plugin('html')
            .tap(args => {
              args[0].cdn = cdn
              return args
            })
            ......
        }
      )
  }
}

index.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">
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <% for(let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css_cdn) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css_cdn[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css_cdn[i] %>" rel="stylesheet">
    <% } %>
    <% for(let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js_cdn) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.js_cdn[i] %>" rel="preload" as="script">
    <% } %>
    <link rel="icon" href="<%= BASE_URL %>newlogo.svg">
    <script src="<%= BASE_URL %>config.js"></script>
    <title><%= webpackConfig.name %></title>
  </head>
  <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>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js_cdn) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js_cdn[i] %>"></script>
    <% } %>
    
  </body>

国际化，关于elementUI

经历了n次的失败，辛酸路程也不想在这里谈，直接上代码

i18n/index.js

这里为了开发和生产模式都可以正常使用element的国际化，所以设置ELEMENT常量，
开发环境中：
-------------- 直接获取node_modules中语言包js的文件位置，导入（这里使用require动态导入），记得.default[都是被坑出来的]。
生产环境中：
--------------由于elementui使用cdn，怎会自动导入全局window.ELEMENT，这里切勿直接写ELEMENT，这样获取到的不是你想要的。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'

import en from './config/en'
import zhmo from './config/zh-mo'
import zh from './config/zh'
Vue.use(VueI18n)
const ELEMENT = window.ELEMENT || process.env.NODE_ENV === 'development' && {
  lang: {
    zhCN: require('element-ui/lib/locale/lang/zh-CN').default,
    zhTW: require('element-ui/lib/locale/lang/zh-TW').default,
    en: require('element-ui/lib/locale/lang/en').default
  }
}

// 创建vue-i18n实例
const i18n = new VueI18n({
  // 设置默认语言
  locale: Cookies.get('language') || 'zh',
  // 添加多语言
  messages: {
    zh: {
      ...zh,
      ...ELEMENT.lang.zhCN
    },
    zhmo: {
      ...zhmo,
      ...ELEMENT.lang.zhTW
    },
    en: {
      ...en,
      ...ELEMENT.lang.en
    }
  },
  silentTranslationWarn: true
})

export default i18n

不是vue文件中，使用ElementUI的组件

比如你想在定义axios中的文件中，使用Message去给出一些提示，那么你就需要根据是否为开发环境，而对获取element的这个常量就该选取不同的位置

const ELEMENT = window.ELEMENT || process.env.NODE_ENV === 'development' && require('element-ui')

在这里插入图片描述

不cong明的亚子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue前端性能优化之cdn的使用

优化原因目中首页加载过慢，原因是js,css 静态资源第一次加载的时间长vue.config.js'use strict'......const cdn = { js_cdn: [ 'https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js', 'https://unpkg.com/vue@2.6.10/dist/vue.js', 'https://unpkg.com/vue-i18n@8.18.2/dist
复制链接

扫一扫