Vue性能优化与构建优化

Vue 开启 gzip 压缩

  1. 首先打开 config/index.js,找到 build 对象中的 productionGzip,改成 true
  2. 打开 productionGzip: true 之前,先要安装依赖 compression-webpack-plugin,官方推荐的命令是:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
npm install --save-dev compression-webpack-plugin

webpack.prod.conf.js 中加入

/* 开启 gzip 的情况下使用下方的配置 */
if (config.build.productionGzip) {
/* 加载 compression-webpack-plugin 插件 */
var CompressionWebpackPlugin = require('compression-webpack-plugin')
/* 向webpackconfig.plugins中加入下方的插件 */
webpackConfig.plugins.push(
/* 使用 compression-webpack-plugin 插件进行压缩 */
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}

我在开启的过程中,发现一个报错的问题。 答案在这里 https://segmentfault.com/q/1010000016302841

1
2
3
4
5
6
1. 卸载之前的compression-webpack-plugin安装包,执行命令:
npm uninstall --save-dev compression-webpack-plugin
2. 重新安装1.1.11版本,执行命令:
npm install --save-dev compression-webpack-plugin@1.1.11
3. 等安装好之后,重新运行命令:
npm run build

打包成功如下图:

gzip 压缩原理

但是不是每个浏览器都支持 gzip 的,如果知道客户端是否支持 gzip 呢,请求头中有个 Accept-Encoding 来标识对压缩的支持。客户端 http 请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持 gzip 压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在 http 响应头,我们可以看到 content-encoding:gzip,这是指服务端使用了 gzip 的压缩方式。

那么怎么看有没有用 gzip 压缩的文件呢,打开 f12,查看 network,按照下面的方式过滤

content-encoding 是 gzip 的话就说明返回的是 gzip
还有一点 gzip 不压缩图片,因为压缩之后会更大- -,所以一般到是压缩 css 和 js。剩下的事情就可以交给后端的童鞋们去处理了。

Vue 编译速度提升-DllPlugin

未进行打包优化的痛点:

随着项目的不断扩大,引入的第三方库会越来越多,我们每次 build 的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发。

解决思路:

第三方库我们只是引入到项目里来,一般不会经常性的去修改源码,一般都是在 src 目录下编写业务代码,因此可以把第三方依赖和 src 分开打包。
每次 build 的时候我们只需要把之前 build 好的第三方依赖文件引入到项目中即可,避免了我们每次 build 的时候都会 build 第三方依赖。当第三方依赖发生改变的时候我们只需要把第三方依赖再 build 一次就行。
很多优化效果的文章,记录一下自己优化的过程。
首先在 build 文件夹下(根目录,config 目录下都可以)创建 webpack.dll.conf.js。内容如下:

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
43
44
45
46
47
const path = require('path');
const webpack = require('webpack');

module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: [
'vue',
'vuex',
'axios',
'vue-router',
'echarts',
'jsencrypt',
'moment',
'mobile-detect',
'crypto-js',
'better-scroll',
'vue/dist/vue.esm.js'
]
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
// vendor.dll.js中暴露出的全局变量名。
// 主要是给DllPlugin中的name使用,
// 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件,与该文章主线无关
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
beautify: false, //最紧凑的输出,不保留空格和制表符
comments: false //删除所有注释
},
parallel: true
})
]
};

将第三方包抽离出来打包的脚本已经写好了,需要编写一条命令来执行该脚本。
package.json 中 scripts 下加入该命令”dll”: “webpack –config build/webpack.dll.conf.js”执行下 npm run dll
命令将第三方依赖进行打包如下图:

可以看到在项目中生成了 vendor-manifest.json 和 vendor.dll.js 这两个文件

最后在 html 里面引入 vendor.js 就大功告成了

还有今天在搞优化的时候发现一个大佬的博客,还发现大佬配图很棒棒。

图棒不棒的不重要,主要是我爱学习。

本文标题:Vue性能优化与构建优化

文章作者:Jonathon

发布时间:2019年03月26日 - 19:03

最后更新:2019年03月26日 - 20:03

原始链接:https://www.jonathon.cn/vue-dll.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!