Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about the packaging optimization method of the react front-end project. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Analysis.

Judge the time and size of loading resources through the console.

Through the developer's tools, you can see that the main reason for the white screen is that the packaged file bundle.js is too large, up to 3.6m plus the bandwidth of the uat environment, it takes 30s to load the bundle.js alone, so the white screen time is too long, and the user experience is poor. In order to solve this problem, we have to copy the code from this bundle.js.

Use webpack-bundle-analyzer to analyze which modules are too large.

Const BundleAnalyzerPlugin = require ('webpack-bundle-analyzer'). BundleAnalyzerPluginconst webpackConfigDev = {plugins: [. New BundleAnalyzerPlugin ({analyzerPort: 3012}),]}

This is the case when local development is packaged. Without gzip, it is so large, and local development compilation and packaging is also very slow. From the figure above, you can analyze several large modules, one of which is echarts, and the other is the code under the source file src directory, so optimization is divided into three steps:

1. Optimize echarts

two。 Optimize the business code under src

3. Compress the packaged files with gzip

Optimize

Optimize echarts

Echarts is used in many places in the project, but the corresponding modules are rarely used in business. The whole package into bundle.js will only make the whole package bigger. The idea is that echarts files are not packaged into bundle.js, and replication code is introduced using cdn method.

Optimize echarts related code

1. The entry file index.html is directly imported into the echarts file of cdn with script.

TCRM

two。 The use of echarts is changed to the following introduction

The original var myChart = echarts.init (this.refs.char,'crm')

Var myChart = this.$echarts.init (this.refs.char,'crm') after revision

Optimize src files

For users, it is possible to operate only a few modules at each operation, while other modules rarely operate. If you can load as needed, you can break up into parts and load the chunk of the current module each time, which will not affect users' use and reduce the loaded resources. Referring to other articles, we decided to use react-loadable to cut and copy the code according to the route.

React-loadable related code

Originally written, component introduction

Import Dashboard from'. / components/Dashboard'

After using react-loadable

Import Loadable from 'react-loadable';const LoadingFun = () = > {return;}; const Dashboard = Loadable ({loader: () = > import ('. / components/Dashboard'), loading: LoadingFun}); webpack related const webpackConfigBase = {. Output: {path: resolve ('. / dist'), filename: 'bundle. [hash: 6] .js', chunkFilename: 'chunks/ [name]. [hash: 6] .js',}}

Local operation sub-chunks package

Problems encountered in step-by-step packing

1. Packaging style problem, all the css is packaged into bundle.css, but using the little sister feedback style tested after being packaged by route is very strange. I took a look at the loaded resources and found that it was really not packaged into the style under different routes. I checked and found that it was necessary to cooperate with and change the webpack configuration.

Const webpackConfigBase = {. Plugins: [/ / extract css / / the original new ExtractTextPlugin ('bundle.[ hash: 6] .css'), new ExtractTextPlugin ({filename: 'bundle.[ hash: 6] .css', allChunks:true}), / / add an allChunks:true]}

The name of 2.chunk. First, specify the corresponding chunkName reference https://github.com/mrdulin/blog/issues/43.

Gzip compression

The project uses nginx as a proxy to call packaged resources, so you can consider adding configuration and gzip files to the nginx layer.

Add related configurations

Gzip on;gzip_min_length 1k MSIE buffers 4 16k switch gzipsets httppets version 1.1 cross gzipsets compounding level 9 leading gzipmakers types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;gzip_disable "MSIE [1-6]\.; gzip_vary on

Optimization results

These are all the contents of this article entitled "react Front-end Project Packaging and Optimization". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.