create-react-app webpack分离公共库 试试Dllplugin

前段时间，写了一篇关于vue-cli3 的 Dllplugin 链接，个人项目是react的，所以也想修改一下。代码大部分都是一样的。提倡不要改默认配置，就是不建议要npm run eject。可以类似vue.config.js一样新建文件配置最后覆盖。其实antd ui 按需加载就提供了一个思路 customize-cra。

在上面也是可以写配置文件。我以配置dllplugin为例。到时候可以自己按照实际项目扩展。

当前文件目录新建 webpack.dll.config.js

const path = require('path')
const webpack = require('webpack')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')


// dll文件存放的目录
const dllPath = 'public/vendor'

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: ['react','antd','react-dom','react-redux','redux','react-router-dom','redux-thunk','axios','less-loader']
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].dll.js',
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: '[name]_[hash]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    // 设置环境变量
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与 output.library 中名称一致
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

package.json

  "scripts": {
    "start": "react-app-rewired start",
  + "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

npm run dll

在public文件夹下面生成vendor文件即可

config-overrides.js (可以去看antd UI 官网按需加载 地址链接)。这里只是在基础上扩张webpack配置addCustomize。

const {
    override,
    fixBabelImports,
    addLessLoader,
    addDecoratorsLegacy,
    addWebpackAlias
} = require('customize-cra');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack')
const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


const addCustomize = () => config => {
    if (process.env.NODE_ENV === 'production') {
        config.devtool = false; //去掉map文件
        config.plugins.push(
            new webpack.DllReferencePlugin({
                context: process.cwd(),
                manifest: require('./public/vendor/vendor-manifest.json')
            }),
            // 将 dll 注入到 生成的 html 模板中
            new AddAssetHtmlPlugin({
                // dll文件位置
                filepath: path.resolve(__dirname, './public/vendor/*.js'),
                // dll 引用路径
                publicPath: './vendor',
                // dll最终输出的目录
                outputPath: './vendor'
            }),
            // 释放 可以解析项目
            // new BundleAnalyzerPlugin({
            //     analyzerMode: 'static'
            // })
        )
    }
    return config;
}

// 自定义主题
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': '#019DE6'
        },
    }),
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src')
    }),
    addDecoratorsLegacy(),
    addCustomize()
);

npm run build

看能不能在打包后的文件夹中index.html中是否引用vendor文件，成功就ok了。跟vue-cli3相似。