性能优化

vue 分析项目外部依赖大小

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

1
2
3
4

webpack-bundle-analyzer插件配置 vue.config.js中使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: { // webpack 配置
    plugins: [
      new BundleAnalyzerPlugin()
    ],
 
  },
}

1
2
3
4
5
6
7
8
9

compression-webpack-plugin 插件安装

npm install compression-webpack-plugin -D
或
yarn add compression-webpack-plugin -D

1
2
3

vue.config.js添加如下配置

const CompressionPlugin = require('compression-webpack-plugin');
 new CompressionPlugin({
	 test: /\.(js|css|html)?$/i, // 压缩文件格式
	  filename: '[path][name].gz', // 压缩后的文件名
	  algorithm: 'gzip', // 使用gzip压缩
	  // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
	  threshold: 20240,
	  minRatio: 0.8, // 压缩率小于1才会压缩
	  deleteOriginalAssets: true// 是否删除原资源
 })

1
2
3
4
5
6
7
8
9
10
11

配置nginx

一般写在server或者location均可；

# 开启和关闭gzip模式
gzip on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

###开启效果

chunk-vendorsjs 原来大小4m 开启之后大小只有 1.4m

splitchunks拆分

module.exports = {
configureWebpack:{
    optimization: {
      splitChunks: {
        cacheGroups: {
          testVendor: {
            test: /[\\/]node_modules[\\/]/,
            priority: -1, // 注意跟默认配置的优先级问题
            chunks: 'initial',
            minSize: 20000,
            name(module,chunks, cacheGroupKey) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}`
            }

          }
        }
      },
    },
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

SplitChunks插件配置选项
chunks 选项，决定要提取哪些模块
默认是 async ：只提取异步加载的模块出来打包到一个文件中。
异步加载的模块：通过 import(‘xxx’) 或 require([‘xxx’],() =>{}) 加载的模块。

initial：提取同步加载和异步加载模块；
如果 xxx 在项目中异步加载了，也同步加载了，那么 xxx 这个模块会被提取两次，分别打包到不同的文件中。
同步加载的模块：通过 import xxx 或 require(‘xxx’) 加载的模块。

all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中；

minSize 选项：规定被提取的模块在压缩前的大小最小值，单位为字节；
默认为30000，只有超过了30000字节才会被提取。

maxSize 选项：把提取出来的模块打包生成的文件大小不能超过maxSize值；
如果超过了，要对其进行分割并打包生成新的文件。
单位为字节，默认为0，表示不限制大小。

minChunks 选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。

maxAsyncRequests 选项：最大的按需(异步)加载次数，默认为 6；

maxInitialRequests 选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。

优先级 ：maxInitialRequests / maxAsyncRequests < maxSize < minSize；

automaticNameDelimiter 选项：打包生成的js文件名的分割符，默认为：~

name选项：打包生成 js 文件的名称；

cacheGroups 选项，核心重点，配置提取模块的方案，里面每一项代表一个提取模块的方案。
下面是 cacheGroups 每项中特有的选项，其余选项和外面一致，若 cacheGroups 每项中有，就按配置的，没有就使用外面配置的；

test 选项：用来匹配要提取的模块的资源路径或名称，值是正则或函数；

priority 选项：方案的优先级，值越大表示提取模块时优先采用此方案，默认值为0；

reuseExistingChunk 选项：true / false。
为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的 js 文件。

enforce选项：true / false。
为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 性能优化

# vue 分析项目外部依赖大小

# webpack-bundle-analyzer插件配置 vue.config.js中使用

# compression-webpack-plugin 插件安装

# vue.config.js添加如下配置

# 配置nginx