乐趣区

关于javascript:前端性能优化compressionwebpackplugin和Nginx配置Gzip

jiezi

目标：

应用 gz 资源升高动态资源包大小，晋升前端加载性能与速度。

计划：

前端性能优化计划有很多，本文尝试的是压缩计划——前端打包应用 compression-webpack-plugin 插件压缩动态资源，服务端在 Nginx 开启 Gzip 属性。这样 Nginx 在拜访资源时，如果该资源有 gz 文件，则会申请 gz 文件。

compression-webpack-plugin：

是 webpack 压缩插件，在 webpack 搭建的 vue 我的项目中，引入该插件后，npm run build 除了会生成压缩后的动态资源（JS、css），还会生成 gz 模式的 JS、CSS。

前端配置：

我应用了 vue init webpack xxx 创立我的项目。首先装置插件，

npm install compression-webpack-plugin --save-dev

在 config.js 中开启压缩性能：（这个性能默认为 false）：

前端配置实现！！！

服务端 Nginx 配置：

我本人试验时应用的是本地 Nginx，批改了 nginx.conf，
具体就是在 HTTP{} 外面减少如下代码：

    gzip on;
    gzip_min_length  1100;
    gzip_buffers     4 8k;
    gzip_types       text/plain;
    gzip_static on;

实际

将 dist 文件复制到本地 Nginx 的 html 文件中，在 Nginx 配置跳转：

    server {
        listen       3000;
        server_name  localhost;

        location / {
            root   html;
            index  /dist/index.html;
        }
        
        location /static {root    html/dist;}
    }

在 cmd 中启动 Nginx 即可拜访 localhost:3000.
察看 Network 能够发现区别（正文 Nginx 的 Gzip 即可查看区别）：

问题总结

其中遇到不少问题，而后网上也没有找到具体的解决方案，在这里分享一下：
1- 应用 vue init webpack xxx 创立完我的项目后，我依照网上的办法，在 webpack.config.js 中把 compression-webpack-plugin 插件退出 pluigins 中，而后 npm run build 后报错：

TypeError: Cannot read property 'thisCompilation' of undefined

这时候装置的 compression-webpack-plugin 插件版本是最新的 -7.1.2
网上全部都是删除 node-modules，而后重新安装，没有什么用。
解决方案：执行 npm install compression-webpack-plugin@1.1.12.，并且不要批改 plugins 数组，因为在 config/index.js 中曾经配置了入口了，见前端配置
2- 遇到报错：

ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.

解决方案：
进入 webpack.prod.config.js，批改如下：

遗留问题

我看 dist 文件中生成了 app.js/manifest.js/vendor.js，然而生成 gz 的只有 app.js 和 vendor.js；另外配置了 JS 和 CSS 文件启用 Gzip，然而 css 没有 gz 文件。有没有大神能够解决我的纳闷，非常感谢！

总结结束，有问题请留言。

退出移动版