记一次前端优化（vue2）

由于博主所在公司的前端缺乏高端人员，导致前端代码臃肿，前端页面加载耗时基本上在min级别，于是博主决定进行一次优化 。首先贴上优化前的加载截图 ，明显可以看出 ，资源加载竟然加载了45.2MB，耗时在2.1min。

1. 引入Bundle Size检查打包体积

（1）下载依赖

npm install --save-dev webpack-bundle-analyzer

（2）引入依赖

在 vue.config.js 中添加以下内容

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

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
}

（3）进行打包

执行npm run build

（4）查看文件大小

控制台可以看出打包资源比较大的文件。

打包完成后会跳出可视化页面

2. 按需引入模块

由于小编的项目是公司的老旧项目，代码比较乱 ，这里按需引入比较耗时，这里只对echarts做了处理。

处理思路:

像下图中echart，monent，dayjs等都有优化空间。

echart如果不是报表平台，可以在需要使用的页面引入需要使用的模块 ，而不需要全包引入。

monent和dayjs功能重复，可以选择性优化。

（1）在main.js中删除echarts的引用。

（2）全局搜索并修改引用

替换为

echarts.init(xxx)

(3)局部引入

import echarts from 'echarts'

3. GZIP压缩

（1）下载依赖

npm install --save compression-webpack-plugin

（2）引入依赖

在vue.config.js

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

configureWebpack: {
    plugins: [new BundleAnalyzerPlugin(),
        new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
    ],
...
}

编译后检查dist下是否有.gz文件。

(3) 添加nginx配置

某些nginx是没有这些模块的，如果没有的话 ，启动会报错。

这时候可以选择去编译一个 ，如果是docker部署的，一般都是包含这些模块的。

gzip_static on;   # 如果有 xxx.js.gz 文件，就直接返回它
#brotli_static on; # 如果你也生成了 .br 文件的话
gzip on;
gzip_types application/javascript text/css application/json application/xml text/plain;

（4）手动编译nginx（可选）

#根据自己系统选择对应文件下载源码
https://github.com/nginx/nginx/releases

# 配置编辑
./configure  \
--prefix=$(pwd)  \
--with-http_ssl_module   \
--with-http_gzip_static_module  \
--with-http_v2_module
...添加自己需要的模块


#启动编译
make install

编译完成后即可正常访问。

（5）检查是否生效

4. 分割vendor.js

由于小编的vendor.js居然有27M之多，这里先来了解下这个文件是个什么的 。

• chunk-vendors.js 通常存放项目里用到的第三方库代码（vendors），例如：

  • vue、vue-router、vuex

  • axios

  • 其他通过 npm install 引入的依赖

• 它由 Webpack 的代码分割（Code Splitting） 机制自动拆分出来，避免和业务代码混在一起

由于博主分割后导致部分样式问题，所以后续没有使用分割 ，这里暂时未做记录。

5. 安装depcheck检查未使用的依赖

（1）安装依赖

npm install depcheck --save-dev

（2）在项目根目录执行

depcheck

//如果找不到命令则执行
depcheck.cmd

（3）卸载未使用的依赖

执行后可以看到输入结果

6. 再次打包

总体积较少了10M左右 ，并且拆分了大的vendor.js

由于博主的项目比较老旧，代码结构比较乱 ，目前只能暂时优化到这里 ，后续有时间再进一步优化 。

使用chrome的无痕模式加载页面可以看到效果非常显著已经从2min优化到2秒左右了