單獨打包第三方庫代碼

module.exports = {
   optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          // 打包第三方庫
          test: /\/node_modules\//,
          name: "vendor",
          chunks: "all",
          minChunks: 1
        }
      }
    }
  }
})

單獨打包 css 代碼

使用 mini-css-extract-plugin插件，推薦生產(chǎn)環(huán)境啟用，因為該插件不支持熱更新。使用contenthash。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(base, {
    mode: "production",
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]-[contenthash].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
        ]
    }
})

壓縮混淆代碼

optimize-css-assets-webpack-plugin 壓縮css文件。
uglifyjs-webpack-plugin 壓縮js文件。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(base, {
    mode: "production",
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),
            new OptimizeCssAssetsPlugin({})
        ]
    }
})

合并css chunk成一個css文件

module.exports = {
   optimization: {
    splitChunks: {
      cacheGroups: {
        style: {
          name: 'style',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
         }
        }
      }
    }
  }
})

推薦插件

preload-webpack-plugin 預加載chunk
happypack 利用多進程的模式加速編譯，使得構建速度更快。
script-ext-html-webpack-plugin 讓 js 加載方式支持 async 或 defer等。

tips

const TopicList = getComponent(() => import(/* webpackChunkName: 'Topic' */"./modules/Home/TopicList.jsx"))
// 該方式可以給chunk起名字，方便排查問題。
const TopicList = getComponent(() => import(/*webpackPrefetch:true, webpackChunkName: 'Topic' */"./modules/Home/TopicList.jsx"))
// webpackPrefetch:true 可以指定chunk進行預獲取。
// webpackPreload:true 可以指定chunk進行預加載。

demo

完整配置可見demo
my-react
my-cnode