【webpack系列】从零搭建 webpack4+react 脚手架（五）

时间 2019-11-26

标签 webpack系列搭建 webpack4+react webpack react 脚手架栏目 React 繁體版

原文原文链接

本章节，咱们一块儿来探讨如下问题：如何对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等。css

1 gzip压缩

若是你想节省带宽提升网站速度，压缩是一种简单有效的方法。咱们模拟一次html的请求，想象一下浏览器和服务器的对话：html

浏览器：嘿，给我来一个 index.html文件
服务器：好的，让我去找找它是否是在~
服务器：找到它了，我会返回一个成功的状态码（200 ok），我正在发送文件……
浏览器：100kb？我滴天……等啊……等啊，好的，下载下来了

那如今问题在哪呢？node

好吧，这系统是正常的，可是过低效了，坦白讲100kb是一大段的文字，HTML是冗余的，每个标签都有一个几乎相同的闭合标签。虽然通篇文字都有重复，可是只要你砍掉任何的内容，html都不会正常显示。webpack

当文件太大的时候有什么好办法呢，就是gzip压缩它。web

若是咱们传输一个替代原始大文件的zip的压缩文件给浏览器，就会节省带宽和下载时间。当浏览器能够下载zip文件，解压，而且渲染给用户。下载很快，页面加载也很快。如今，这个浏览器–服务器的会话大概是这样的：正则表达式

浏览器：嘿，给我来一个index.html，若是要有，给我来一个压缩版的能够吗
服务器：容我找找……好，知足你
服务器：yep，找到了，立刻传给你。
浏览器：太棒了，只有10kb，我来解压，而且渲染给用户。

状况很简单：文件越小，下载更快，用户感觉更好。下面咱们讲讲经过webpack如何对文件进行gzip压缩。算法

（1）前期准备

开启gzip压缩，须要在webpack配置文件中添加一个plugin，而咱们但愿把是否开启gzip压缩作成可配置化，也就是说，这个gzip的plugin能够选择添加也能够不添加。
咱们在config.js中的build下添加一个配置项，取名为productionGzipnpm

productionGzip:true,

另外，咱们还须要修改下webpack.prod.conf.js。首先咱们把原来export出来的配置对象放一个变量webpackConfig中，这样，咱们能够后续访问的到plugins数组，而且能够追加plugin。稍微修改webpack.prod.conf.js，就像这样：json

    const webpackConfig=merge(baseWebpackConfig, {
        mode: 'production',
        output: {
            path: config.build.assetsRoot,
            filename: utils.assetsPath('js/[name].[chunkhash:16].js'),
            chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
        },
        module: {
            rules: utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,
                extract: true,
                usePostCSS: true,
                cssModule:config.base.cssModule,
                cssModuleExcludePath:config.base.cssModuleExcludePath
              })
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: config.build.index,
                inject: 'body',
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
            }),
            new CleanWebpackPlugin([config.build.assetsRoot], { allowExternal: true }),

            //导出css 
            new MiniCssExtractPlugin({
                filename: utils.assetsPath('css/[name].[hash].css'),
                chunkFilename: utils.assetsPath('css/[id].[hash].css'),
            }),
        ],
        optimization: {
            minimizer: [
                new UglifyJSPlugin(),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorOptions: true
                        ? {
                            map: { inline: false }
                        }
                        : {}
                })
            ],
            splitChunks: {
                chunks: "all",
                minChunks: 1,
                cacheGroups: {
                    framework: {
                        priority: 200,
                        test: "framework",
                        name: "framework",
                        enforce: true,
                        reuseExistingChunk: true
                    },
                    vendor: {
                        priority: 10,
                        test: /node_modules/,
                        name: "vendor",
                        enforce: true,
                        reuseExistingChunk: true
                    }
                }
            }
        }
    });

    if (config.build.productionGzip) {
        //添加gzip压缩插件
    }

    module.exports = webpackConfig;

（2）添加gzip压缩插件

安装gzip插件：compression-webpack-plugin数组

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

（3）使用插件

使用只要把CompressionWebpackPlugin的实例对象追加到plugins内便可。支持传入一个配置对象，相关说明：

filename 压缩后的文件名
algorithm 算法默认gzip
test 针对文件的正则表达式规则，符合规则的文件被压缩
threshold 文件大于这个值的会被压缩
minRatio 压缩率默认0.8

要配置test，咱们在config.js的build属性下新增长一个配置项，取名productionGzipExtensions，是一个数组，定义了那些后缀的文件要被压缩。

productionGzipExtensions: ['js', 'css'],

而后这样经过正则表达式：

    new RegExp('\\.(' +
        config.build.productionGzipExtensions.join('|') +
    ')$')

配置的后缀会符合规则被gzip压缩。
在webpack.prod.conf.js详细的配置以下：

    if (config.build.productionGzip) {
        const CompressionWebpackPlugin = require('compression-webpack-plugin')

        webpackConfig.plugins.push(
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
              '\\.(' +
              config.build.productionGzipExtensions.join('|') +
              ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
          })
        )
      }

执行命令查看：

npm run build

查看编译后生成的js，多了.gz文件，这个就是gzip压缩后的文件，把它们上传到服务器，而且服务器开启gzip的功能便可。

bundle分析工具

编译后，咱们不能直观地知道那些组件被编译到哪些文件中。经过bundle分析工具，能够直观地看清楚这个问题。好处是帮助咱们更好地优化代码和改进编译。

(1) 安装webpack-bundle-analyzer

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

(2)配置是否启用的参数

在config.js文件的build属性下增长配置项bundleAnalyzerReport，用来表示是否开启分析。这个变量会不停修改，因此咱们但愿会在npm命令后面加上--report 就表示最后启动bundle分析，不加就不会启动bundle分析。怎么作？经过process.env.npm_config_report能够获取到npm命令的配置

bundleAnalyzerReport: process.env.npm_config_report

(3）使用

在webpack.prod.conf.js增长以下代码：

    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }

(4)执行命令

分别如下2个执行试试看吧

npm run build

npm run build --report

经过增长--report 编译成功后会启动Webpack Bundle Analyzer。默认是http://127.0.0.1:8888。你能够直观看到每一个文件有哪些模块被编译进去。

美化终端的提示

在编译过程当中，咱们但愿在终端能给出提示，编译成功给出咱们自定义的一些说明。

（1）ora和chalk

这里须要介绍2个npm库。ora是一个能让你在终端提示状态的库，chalk是方便咱们美化输出的文本。
咱们先安装这2个库。

npm i --save-dev ora chalk

（2）修改编译的方法

看看咱们原先的build方法，打开package.json，在scripts属性下找到build属性，能够看到它的值是
webpack --config build/webpack.prod.conf.js
经过webpack命令在终端去编译，咱们没法获取webpack的编译状态，webpack还提供了webpack方法，经过webpack方法编译，编译结束能够执行回调函数。咱们须要美化终端的显示，但愿在编译中能显示编译的状态，编译结束提示编译成功，颇有必要修改为经过webpack方法来编译。
在build目录下新增长一个build.js文件：内容以下：

    const ora = require('ora');
    const chalk = require('chalk')
    const webpack = require('webpack')
    const webpackConfig = require('./webpack.prod.conf');
    const spinner = ora('编译中...\n').start();
    webpack(webpackConfig, function (err, stats) {
        if (err) {
            spinner.fail("编译失败");
            console.log(err);
            return;
        }
        spinner.succeed('编译已结束. \n');

        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + '\n\n');
        console.log(chalk.cyan('  编译成功！\n'))
        console.log(chalk.yellow(
            '  提示: 编译后的文件能够上传而且部署到服务器\n' +
            '  经过file:// 打开index.html不会起做用.\n'
        ))
    })

stats是编译结束后webpack回调回来的参数，包含了编译后的文件信息。
修改package.json的build属性：

"build": "node build/build.js",

最后从新执行编译命令看看吧

npm run build

观察终端的输出，是否是漂亮了不少。固然你能够本身定制输出的内容。