VUE单页应用首屏加载速度优化方案

单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案**1. 使用CDN资源,减小服务器带宽压力2.路由懒加载3. 将一些静态js css放到其他地方（如OSS），减小服务器压力4. 按需加载三方资源，如iview,建议按需引入iview中的组件1、使用CDN资源,减小服务器带宽压力在index.html中引入cdn资源<body>...

gs981600308

2641人浏览 · 2019-11-21 15:04:30

gs981600308 · 2019-11-21 15:04:30 发布

单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案

**1. 使用CDN资源,减小服务器带宽压力
2. 路由懒加载
3. 将一些静态js css放到其他地方（如OSS），减小服务器压力
4. 按需加载三方资源，如iview,建议按需引入iview中的组件

1、使用CDN资源,减小服务器带宽压力

在index.html中引入cdn资源

 <body>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
  </body>

修改 build/webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'vue-resource': 'VueResource'
  },
  ...
}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

2、路由懒加载

require.ensure方式

const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')

import方式

const workCircle = () => import('@/module/work-circle/Index')

3、将一些静态js css放到其他地方（如OSS），减小服务器压力

注意这里的js文件，需要将结果抛出，然后在需要用到该js的组件中import引入

4、按需加载三方资源，如iview,建议按需引入iview中的组件

按需引用请查看element-ui官方文档

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^