关于javascript:Vue项目首屏加载速度优化

一、路由懒加载

1、作用

晋升用户体验，晋升首屏组件加载速度，解决白屏问题

2、代码示例

2.1 未应用路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
export default new Router({
  routes: [
    {
        path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2.2 应用路由懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  routes: [
    {
        path: '/',
      name: 'HelloWorld',
      // 办法一：vue 异步组件实现
      // component: resolve => (require(['@/components/HelloWorld'], resolve))
      // 办法二：import 办法 (罕用)
      component: () => import('@/components/HelloWorld')
    }
  ]
})

二、组价懒加载

1、代码示例

1.1 本来写法

<template>
  <div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld'
  export default {
    components: {HelloWorld},
    data() {
      return {msg: 'this is Vue App'}
    }
  }
</script>

1.2 组件懒加载写法

<template>
  <div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>

<script>
export default {
  components: {
      // 办法一
    'HelloWorld': () => import('./HelloWorld'),
    // 办法二
    // HelloWorld': resolve => (['./HelloWorld'], resolve)
  }
}
</script>

三、通过线上引入 CDN 链接

1、找到我的项目中的 index.html 文件

<script src='https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js'></script>

2、配置 webpack.base.conf.js

在 module.exports 中退出以下代码

externals: {
  // 键：示意导入包语法 from 前面跟着的名称
  // 值：示意 script 引入 js 文件时，在全局环境中的变量名称
  vue: 'Vue',
  axios: 'axios',
  'vue-router': 'Router'
}

四、gzip 暴力压缩

1、nginx 开启 gzip 模式

server {
  listen 8103;
  server_name ***;
  # 开启 gzip
  gzip on;
  # 进行压缩的文件类型
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/png image/gif;
  # 是否在 http header 中增加 Vary: Accept-Encofing, 倡议开启
  gzip_vary on;
}

2、Vue 开启 gzip

2.1 装置依赖

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

2.2 配置 gzip

config –> index.js

build: {
  productionGzip: true,
  productionGzipExtensions: ['js', 'css']
}

五、拓展：剖析文件大的起因

利用 webpack-bundle-analyzer 分析器，剖析我的项目依赖关系

build –> webpack.prod.conf.js

const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugin: [new BunldeAnalyzerPlugin(),
]

而后运行 npm run build 打包命令，浏览器会呈现如下页面，此时咱们就能看到哪些文件外面到底蕴含了什么货色