2021-05-06-vue优化

背景

项目越做越大，页面越来越多，导致项目也越来越卡顿。

解决思路

• 1、首屏优化
• 2、技术债务编码优化
• 3、打包优化，cdn

首屏优化

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。利用webpack的externals配置。防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

1. 首先安装webpack的可视化资源分析工具，命令行执行：

'# NPM 
 npm i webpack-bundle-analyzer -D
 # Yarn 
 yarn add -D webpack-bundle-analyzer

2.1 然后在webpack的dev开发模式配置中，引入插件，代码如下：const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
    new BundleAnalyzerPlugin()
]

2.2 vue-cli3中vue.config.js中加入配置

chainWebpack: (config) => {
    // 关闭prefetch: vue-cli3 默认会把所有通过import()按需加载的javascript文件加上 prefetch
    config.plugins.delete('prefetch');
    // 打包分析插件
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);

    // 复写html指令，防止xss攻击
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        options.compilerOptions.directives = {
          html(node, directiveMeta) {
            (node.props || (node.props = [])).push({
              name: 'innerHTML',
              value: `$xss.process(_s(${directiveMeta.value}))`,
            });
          },
        };

        return options;
      });
}

3. 最后命令行执行npm run build –report , 浏览器会自动打开分析结果

4. app.xxx.js 文件过大

解决方案：

1. 代码分割 CommonsChunkPlugin；
2. 提取第三方库 vendor
3. 外部引入第三方库 external
4. 设置缓存
5. 代码压缩 uglifyJsPlugin

引入CommonChunkPlugin，并在router/index.js中使用require.ensure()进行组件的引入：

一、对于第三方js库的优化，分离打包

生产环境是内网的话，就把资源放内网，通过静态文件引入，会比node_modules和外网CDN的打包加载快很多。如果有外网的话，可以通过CDN方式引入，因为不用占用访问外网的带宽，不仅可以为您节省流量，还能通过CDN加速，获得更快的访问速度。但是要注意下，如果你引用的CDN 资源存在于第三方服务器，在安全性上并不完全可控。       

目前采用引入依赖包生产环境的js文件方式加载，直接通过window可以访问暴露出的全局变量，不必通过import引入，Vue.use去注册       

在webpack的dev开发配置文件中, 加入如下参数，可以分离打包第三方资源包，key为依赖包名称，value是源码抛出来的全局变量。如下图所示，可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库，尽量采用按需引入的方式。

externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
}

四、开启gizp压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。
命令行执行：npm i compression-webpack-plugin -D在webpack的dev开发配置文件中加入如下代码:const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

plugins: [
   new CompressionWebpackPlugin()
]

参考资料

前端项目配置Gzip的两种方式
1、静态压缩：前端工程打包成Gzip,然后nginx开启Gzip模块

• vue-cli生成的项目，安装 compression-webpack-plugin 插件
• nginx配置gizp

listen 4300;
    server_name localhost;
    location / {
        root /home/static/web/wechat;
        index /index.html;
        try_files $uri $uri/ /index.html;
        gzip_static on; #静态压缩
    }

2、直接采用nginx进行Gzip化
2.1 nginx配置gizp

在nginx.conf文件夹的http里面配置数据

gzip on; #开启或关闭gzip on off
gzip_min_length 5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_types text/plain application/x-javascript application/javascript text/css 		application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型
gzip_vary on; # 和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩

2.2 开启gzip

gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 设置压缩所需要的缓冲区大小     
gzip_buffers 32 4k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;

前后端gzip压缩区别；
nginx开启gzip 压缩会耗费cpu资源；会降低

双端Gzip区别及其意义
不同之处在于：

• 1、Webpack压缩会在构建运行期间一次压缩文件，然后将这些压缩版本保存到磁盘。
• 2、nginx在请求时压缩文件时，某些包可能内置了缓存,因此性能损失只发生一次(或不经常),但通常不同之处在于,这将在响应 HTTP请求时发生。
• 3、对于实时压缩,让上游代理(例如 Nginx)处理 gzip和缓存通常更高效，因为它们是专门为此而构建的,并且不会遭受服务端程序运行时的开销(许多都是用C语言编写的) 。
• 4、使用 Webpack的好处是， Nginx每次请求服务端都要压缩很久才回返回信息回来，不仅服务器开销会增大很多，请求方也会等的不耐烦。我们在 Webpack打包时就直接生成高压缩等级的文件，作为静态资源放在服务器上，这时将 Nginx作为二重保障就会高效很多。
• 5、注：具体是在请求时实时压缩，或在构建时去生成压缩文件，就要看项目业务情况。

原则：
1、小文件无需压缩，浪费资源
2、图片/mp3这样的二进制文件,不必压缩 因为压缩率比较小, 比如100->80字节