时间戳

首页 > 技术文章 > Webpack nginx gzip实现前端加载优化

Webpack nginx gzip实现前端加载优化

njuclc 2020-05-13 17:26 原文

Webpack + nginx + gzip 实现前端加载优化

遇到的问题

webpack打包后的chunk.js和chunk.css特别大，首屏加载需要三四十秒

解决方法

webpack对于资源进行gzip压缩，nginx开启gzip

实现步骤

1.项目介绍

笔者用的是CRA（create-React-app）框架，该框架对于webpack的配置进行了封装。如果使用eject命令的话，会将封装在 CRA 中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，可以随意修改。

CRA 与其他脚手架不同的另一个地方，就是可以通过升级其中的react-scripts包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了react-scripts包的版本就可以具备 PWA 的功能，项目本身的代码不需要做任何修改。

如果使用了eject命令的话，该过程是不可逆的，就会失去了上述优点。但是，我们可以通过react-app-rewired与customize-cra覆盖默认配置的方法修改配置。

2.安装react-app-rewired与customize-cra

npm install

npm install react-app-rewired customize-cra -D

修改package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

新建config-overrides.js文件

3.compression-webpack-plugin实现gzip压缩

npm install

npm install compression-webpack-plugin -D

写入config-overrides.js文件

const { override, fixBabelImports } = require('customize-cra');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const addCustomize = () => config => {
  if (process.env.NODE_ENV === 'production') {
    // 关闭sourceMap
    config.devtool = false;
    // 配置打包后的文件位置
    config.output.path = __dirname + '../dist/demo/';
    config.output.publicPath = './demo';
    // 添加js打包gzip配置
    config.plugins.push(
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$/,
        threshold: 10240,
      }),
    )
  }
  return config;
}

module.exports = override(
    addCustomize()
  ),
);

关于compression-webpack-plugin的详细配置信息 官方文档

至此，前端的配置已经完成，下面需要配置一下nginx

配置nginx

  1. cd /etc/nginx

  2. vim nginx.conf

  3. gzip on;
gzip_min_length 1k;
gzip_disable msie6;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    修改为上述内容，按esc，输入:wq!回车（傻瓜式教学

推荐阅读