1M带宽的机器对Vue代码的优化(第一次群发)

vlambda
2020-03-26

1M带宽的机器对Vue代码的优化(第一次群发)

使用Vue + Ant Design Vue + Vue Router + Vuex + Axios 构建前端代码，部署完之后发现"chunk-vendors.xxxx.js"有将近1.8MB，我的服务器只有1M的带宽，所以导致整个网站打开很慢。这个js文件包含了vue等所有依赖的库的js代码，所以想要优化网站加载速度，就要想办法减小整个包的体积。

下面是一些减小包体积的方法，大家如果有更多减小包体积的方法，欢迎留言。

1.配置Gzip压缩

Gzip是GNU zip的缩写。它将浏览器请求的文件先在服务器端进行压缩，然后传递给浏览器，浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后，前端需要提供资源压缩包.gz。
本文前端通过vue提供gzip文件，后端通过nginx开启gzip技术。这一步直接就减少了2/3以上的体积。

Vue端

第一步需要vue端对js, css之类的文件进行压缩, 生成Gzip文件。
首先安装插件.这里通过Compression-Webpack-Plugin插件进行压缩

npm i --save-dev compression-webpack-plugin

在vue.config.js 中配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');const productionGzipExtensions = ['js', 'css'];const isProduction = process.env.NODE_ENV === 'production';
.....module.exports = {.... // 配置webpack configureWebpack: config => { if (isProduction) { // 开启gzip压缩 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 10240, minRatio: 0.8 })) } }}

这个时候build vue项目的时候，可以看到已经进行了压缩:

> npm run build...File Size Gzipped
 dist/js/chunk-vendors.9443e771.js 1878.69 KiB 571.03 KiB dist/js/chunk-36ffe4aa.e846a76a.js 26.75 KiB 9.49 KiB dist/js/index.7c179d17.js 23.60 KiB 6.60 KiB dist/js/login.c24768a8.js 16.06 KiB 4.32 KiB dist/js/chunk-55bc5b71.50a41ecc.js 5.18 KiB 2.39 KiB dist/js/chunk-41632074.846f2cdc.js 4.15 KiB 1.74 KiB dist/js/chunk-4fb9b4fb.717f5c17.js 4.04 KiB 1.94 KiB dist/js/chunk-2d0d335d.a0a4a308.js 0.33 KiB 0.26 KiB dist/js/chunk-2d217c7e.20bb524b.js 0.32 KiB 0.25 KiB dist/js/chunk-2d0dd9df.5a7f107b.js 0.32 KiB 0.25 KiB dist/css/chunk-vendors.77555ead.css 451.82 KiB 53.54 KiB dist/css/index.f63c699a.css 0.66 KiB 0.33 KiB dist/css/chunk-41632074.5836bb4d.css 0.47 KiB 0.29 KiB dist/css/login.5a5d0e9d.css 0.31 KiB 0.19 KiB dist/css/chunk-55bc5b71.7f1aafa3.css 0.12 KiB 0.12 KiB dist/css/chunk-4fb9b4fb.8117ee2b.css 0.04 KiB 0.06 KiB

nginx端

我的环境是nginx/1.16.1, centos7.4
首先打开nginx的配置文件/etc/nginx/nginx.conf,在http段增加如下修改:

....http { ....
 gzip on; gzip_static on; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; ....}

重启nginx

systemctl restart nginx

更多配置可以参考nginx官方文档点击这里^[1]

2.设置CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

使用CDN提速的原理就是把一些比较大的依赖的包通过CDN的方式加载，这样最终打包的js和css文件就会小很多,通过下面的设置可以让生产环境使用CDN加载Vue, Vuex, Axios, vue-router, Ant Design Vue。
首先打开public/index.html,引入需要的js和css文件,这里引入moment.js是因为Ant Design 需要先引入moment.js。

<head> ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"> ...</head>
<body> ... <div id="app"></div>
 <script ></script> <script ></script> <script ></script> <script ></script> <script ></script> <script ></script>

 <!-- built files will be auto injected --></body>

接着在vue.config.js里配置config.externals:

module.exports = { ... //分离js，利用cdn加载 config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'moment': 'moment', 'axios':'axios', 'vuex':'Vuex', 'ant-design-vue':'Antd' }; ...}

编译生成环境:

npm run build...File Size Gzipped
 dist/js/chunk-2628a9c1.d6a94a7d.js 78.59 KiB 27.78 KiB dist/js/chunk-vendors.d2a55bb5.js 45.28 KiB 15.78 KiB dist/js/index.c0e5f657.js 12.63 KiB 4.38 KiB dist/js/chunk-176bfdc3.3cc0734e.js 4.48 KiB 2.07 KiB dist/js/login.a24b3c1e.js 4.34 KiB 1.77 KiB dist/css/chunk-vendors.77555ead.css 451.82 KiB 53.54 KiB dist/css/chunk-2628a9c1.2ce98721.css 38.22 KiB 9.71 KiB dist/css/index.a813fd12.css 0.97 KiB 0.43 KiB dist/css/login.0b4c464d.css 0.33 KiB 0.20 KiB dist/css/chunk-176bfdc3.8117ee2b.css 0.04 KiB 0.06 KiB...

这个时候可以看到资源文件gzip后的大小已经很小了，这样在1M带宽的情况下，打开页面快了很多。这时候打开浏览器的F12，可能会报下面的错误：

Vue is not defined

这时候我们需要打开main.js，注释掉下面的代码:

// import Vue from 'vue'// import Antd from 'ant-design-vue';// import Vuex from 'vuex'// import axios from 'axios'// import VueRouter from 'vue-router';

因为之前已经配置了config.externals，所以这里可以把这些import都注释掉。
接着npm run build 完后可能还会碰到下面的错误:

Antd is not defined

这时候需要打开main.js,将

Vue.use(Antd);

改为

Vue.use(antd);

这个时候再npm run build 完之后应该就没有错误了，页面加载的很快。

References

[1] 点击这里: http://nginx.org/en/docs/http/ngx_http_gzip_module.html

vlambda博客
学习文章列表