To optimize the
1: Optimize the image
Url-loader optimization is used to convert small images into Base64 compression to prevent too many requests for small images.
1: download url-loader NPM install -d url-loader 2: configure module: {rules: [{test: / \. (PNG | SVG | JPG | GIF) $/, use: [{loader: 'url - loader, / / optimize small image requests causes too much too many options: {limit: OutputPath: 'img/'}}]}Copy the code2: Separate third-party packages
The bundled bundle.js folder is large, so requests are slow each time they are loaded, so it is necessary to separate third-party packages during packaging. Use the CommonsChunkPlugin plugin for configuration.
1: introduce webpack const webpack = require('webpack') 2: change entry to an object entry: {vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // './src/main.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: Filename: "js/vendor.js", minChunks: Infinity,})],Copy the code3: Separates and compresses the CSS file
Use the extract-text-webpack-plugin to separate out the CSS files. In order to make the project load as early as possible to load CSS styles first, also to solve the problem of large JS file size
NPM install -d extract-text-webpack-plugin 2: extract-text-webpack-plugin 3: extract-text-webpack-plugin Config In the webpack.prod.conf.js folder config 1> import const ExtractTextPlugin = require("extract-text-webpack-plugin") 2> configure separate CSS files Plugins: [new ExtractTextPlugin(" CSS /styles.css"), // Package the extracted CSS file into the styles.css file], Module: {rules: [{test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: { loader: 'css-loader', options: { minimize: {rules: [{test: /\.css$/, use: {rules: [{test: /\.css$/, use: ExtractTextPlugin. Extract ({fallback: "style - loader", / / the local configuration of an object, add an attribute compressing CSS file use: {loader: 'CSS-loader ', options: {minimize: true // configure minimize to true, compress CSS file}}})},Copy the code4: Compress JS files
Uglifyjs-webpack-plugin is used to compress JS and reduce the size of packaged JS files such as Vendor. js and bundle.js
Uglifyjs-webpack-plugin NPM install -d uglifyjs-webpack-plugin 2: 1> import const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 2> configure plugins: [new UglifyJsPlugin(), // compress JavaScript],Copy the code5: Compress Html
In order to reduce the volume of packaged files, improve the performance, efficiency, and load speed, it is necessary to compress the package.
Use htML-webpack-plugin for compression
NPM install -d html-webpack-plugin 2: NPM install -d html-webpack-plugin 2: 1> introduce const HtmlWebpackPlugin = require('html-webpack-plugin') 2> configure plugins: [new HtmlWebpackPlugin({template: './index.html', // put index.html in dist directory // Compress HTML, default false does not compress minify: CollapseWhitespace: true, // Remove extra whitespace removeComments: true,}}),]Copy the code