小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

vue首屏优化方案

作者：小丑西瓜9 | 2024-03-09 15:19:55

踩

vue首屏优化方案

① 性能测试工具： Pingdom Website Speed Test | Pingdom Tools

②安装webpack-bundle-analyzer安装命令npm i webpack-bundle-analyzer -D

然后在webpack的dev开发模式配置中，引入插件，代码如下：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [

new BundleAnalyzerPlugin()

]

最后执行 npm run build --report 浏览器会自动打开可以直接查看打包分析

一、路由懒加载

路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多，官方文档也有提到

component (resolve) {

Require([‘路径’], resolve)

}

改为

component: () => import(‘路径’))

二、后台开启gzip

开启了gzip后js的大小比未开启gzip的js小2/3左右,在浏览器的控制台Content-Encoding一栏会显示gzip，否则没有，或者该文件资源的响应头里显示有Content-Encoding: gzip

前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。

命令行执行：npm i compression-webpack-plugin -D

在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')

plugins: [
new CompressionWebpackPlugin()
]

三、使用CDN加载资源

好处

（1）加快打包速度，分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。

（2）减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

在vue项目中，通过npm安装到工程中所有的js,css文件，在编译时都会被打包进vendor.js，浏览器在加载该文件后才开始显示首屏。我们可以使用 CDN 代替这部分不经常变化的公共库。将vue，vue-router，vuex，axios，jquery，underscore等，使用CDN资源引入

首先我们在index.html中添加cdn

</head>

<body>

</body>

2. 在vue.config.js中添加webpack配置代码

configureWebpack: {

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'vuex': 'Vuex',

'element-ui': 'ELEMENT',

'axios': 'axios',

'underscore' : {

commonjs: 'underscore',

amd: 'underscore',

root: '_'

'jquery': {

commonjs: 'jQuery',

amd: 'jQuery',

root: '$'

}

如果想引用一个库，但是又不想让webpack打包，且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals

3. 去除vue.use相关代码

通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，可以不再使用Vue.use(xxx)

main.js中注释掉

// import Vue from 'vue'，

// import iView from 'iview';

// import '../theme/index.less';

四、element-ui，echarts等按需加载

1、 Import ElementUI from ‘element-ui’

Vue.use(ElementUI)

改为 import {需要的组件如：Button, Table, Input, Pagination} from ‘element-ui’

Vue.use(Button)

Vue.use(Table)等

2. import * as Echarts from ‘echarts’

改为：import VueEcharts from ‘vue-ecarts/components/echarts.vue’

Import ‘echarts/lib/line’

Import ‘echarts/lib/pie’

Import ‘echarts/lib/bar’

Import ‘echarts/lib/component/title’

Import ‘echarts/lib/component/tooltip’等

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/215368