webpack打包经验——处理打包文件体积过大的问题

前言

最近对一个比较老的公司项目做了一次优化，处理的主要是webpack打包文件体积过大的问题。

这里就写一下对于webpack打包优化的一些经验。

主要分为以下几个方面：

1. 去掉开发环境下的配置
2. ExtractTextPlugin：提取样式到css文件
3. webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化
4. CommonsChunkPlugin：提取通用模块文件
5. 提取manifest:让提取的公共js的hash值不要改变
6. 压缩js，css，图片
7. react-router 4 之前的按需加载
8. react-router 4 的按需加载
9. react v16.6之后 的按需加载（2019.07.04更新）

本篇博客用到的webpack插件如何配置都可以去查看我写的这篇博客：

【Webpack的使用指南 02】Webpack的常用解决方案

这里就不细讲这些配置了。

去掉开发环境下的配置

比如webpack中的devtool改为false，不需要热加载这类只用于开发环境的东西。

这些不算是优化，而算是错误了。

对于在开发环境下才有用的东西在打包到生产环境时通通去掉。

ExtractTextPlugin：提取样式到css文件

将样式提取到单独的css文件，而不是内嵌到打包的js文件中。

这样带来的好处时分离出来的css和js是可以并行下载的，这样可以更快地加载样式和脚本。

解决方案：

安装ExtractTextPlugin

npm i --save-dev extract-text-webpack-plugin

然后修改webpack.config.js为：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // ...
    new ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: false }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?modules', 'postcss-loader'],
        }),
      }, {
        test: /\.css$/,
        include: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader'],
        }),
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?modules', 'less-loader', 'postcss-loader'],
        }),
      },
    ],
  },
}

打包后生成文件如下：

webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化

这个东西不算是优化，而是让我们可以清晰得看到各个包的输出文件体积与交互关系。

安装：

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

然后修改webpack.config.js: