Create-react-app package optimization

In this article, the default configuration of create-React-app cli was modified, including adding gzip compression, turning off sourceMap, adding antd/ Material – UI loading on demand, adding compilation progress bar, and adding plug-in to view the size of each package after packaging.

yarn add customize-cra react-app-rewired progress-bar-webpack-plugin webpack-bundle-analyzer compression-webpack-plugin cross-env -D

To change the ANTD theme, add yarn add less less-loader -d

config-overrides.js

const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias,
  addWebpackPlugin,,
  // addLessLoader,
  // addPostcssPlugins,
} = require("customize-cra");
const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CompressionWebpackPlugin = require("compression-webpack-plugin");

const isEnvProduction = process.env.NODE_ENV === "production";

const addCompression = (a)= > config => {
  if (isEnvProduction) {
    config.plugins.push(
      / / gzip compression
      new CompressionWebpackPlugin({
        test: /\.(css|js)$/.// Only resources larger than 1KB are processed
        threshold: 1024.// Only files with compression rates below 90% are processed
        minRatio: 0.9})); }return config;
};

// Check the size of each package
const addAnalyzer = (a)= > config => {
  if (process.env.ANALYZER) {
    config.plugins.push(new BundleAnalyzerPlugin());
  }

  return config;
};

module.exports = override(
  / /!!!!!!!!!! Load on Demand If you configure only one import on demand, for example, ANTD, you need to remove the brackets of the second parameter; otherwise, the configuration becomes invalid
  fixBabelImports("import"[{libraryName: "antd".libraryDirectory: "es".// To change the antD theme, change "CSS" to true
      style: "css"
    },
    {
      libraryName: "@material-ui/core".libraryDirectory: "esm".camel2DashComponentName: false}]),// Install postCSs-pxtorem for converting PX to REM
  // addPostcssPlugins([
  // require("postcss-pxtorem")({
  // // REM conversion cardinality
  // rootValue: 16,
  // // preserves five decimal points
  // unitPrecision: 5,
  // // All attributes are converted
  // propList: ["*"],
  // // does not convert below 2px
  // minPixelValue: 2,
  // // exclude antD style
  // selectorBlackList:[/^\.ant-/,"html"]
  / /}),
  Yarn add less less-loader -d Add the dependency package
  // addLessLoader({
  // javascriptEnabled: true
  // modifyVars: { '@primary-color': '#1DA57A' },
  // }),
  addCompression(),
  addAnalyzer(),
  addWebpackPlugin(
    // The terminal progress bar is displayed
    new ProgressBarPlugin()
  ),
  addWebpackAlias({
    ["@"]: path.resolve(__dirname, "src")}));Copy the code

package.json

Declare the global variable GENERATE_SOURCEMAP=false at package.json, instead of adding the devtool configuration in config-overrides. Eject postCSS-loader options:sourceMap: isEnvProduction && shouldUseSourceMap.

After the package is packaged in build: View mode, the dashboard for analyzing the size of each module package is automatically opened.

 "scripts": {
    "start": "react-app-rewired start",
    "build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
    "build:view": "cross-env GENERATE_SOURCEMAP=false ANALYZER=true react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
Copy the code

The environment variable

API prefix paths can be distinguished by environment variables or by adding proxies.

A few environment variables can be configured directly at scripts in package.json. See above.

Or can be added in the root directory. Env <. Development. | prodcution. | test. | local > can be multiple overlay, details please refer to Adding Custom Environment Variables.

configuration

Attention! Must start with REACT_APP_!

.env.development

REACT_APP_HOST = "http://localhost:5000"
Copy the code

.env.production

REACT_APP_HOST = "http://xxx.xxx.xxx.xxx:5000"
Copy the code

use

Process.env.react_app_host can be obtained directly.

Image Source Configuration

Root directory to create.npmrc files

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
disturl=https://npm.taobao.org/dist
Copy the code

Here are some tidbits

About the CDN

The essence of CDN is to reduce the size of packaged files by importing libraries from the third party online. For ordinary projects, there is no actual need to use CDN. After all, libraries like React and React-DOM are only a few or dozens of KB after gzip, so CDN files with such size is meaningless. However, for larger libraries, such as ANTD or Material – UI, the introduction of CDN cannot be introduced on demand, and the use of CDN is not worth the loss. So there is no special need and no need to be on the CDN.

About DLL packaging

DLL packaging is actually a manual cache library operation, now the performance of Webpack4 is not bad, DLL packaging will save those seconds (the test based on CRA added to try), it does not make sense. Cra and VUE-CLI have also cancelled DLL packaging plug-ins, it is a bit redundant to add them manually = =. The hard-source-webpack-plugin is no longer used in Webpack 5.

About Multi-threaded packaging

Thread-loader and happypack are two libraries in the mainstream. I have not tried them. I prefer to build the server directly.