Webpack Packaging Performance Optimization

1. Compress the packaged JS file using gzip

This method optimizes the file size when the browser is downloaded (the size of the packaged file does not change)
In Webpack.config.prod.js

varCompressionwebpackplugin=  require(' Compression-webpack-plugin ');//Add in PliginsNew  Compressionwebpackplugin({ //gzip Compression    Asset:  ' \[path\].gz\[query\] ',    algorithm:  ' gzip ',    Test:  New  RegExp('\\\. (JS|CSS) $ '  //Compression js and CSS),    Threshold:  10240,    Minratio:  0.8})

So packaged CSS JS, there will be css.gz js.gz, that is, compressed JS and CSS.
Then, in the server-side nginx configuration, open gzip:
To view the configuration file:vim /usr/local/etc/nginx/nginx.conf

// 写在 http 中就可以gzip  on;gzip_types application/javascript text/css image/jpeg;

This way the browser download the file or the previous JS, but the server returned the compressed. gz file, and then extracted locally, the time shortened a lot.

2. Echart uses the external chain JS file, does not introduce the NPM package

Introduced in HTML,,,, echarts.min.js china.js echarts-gl.min.js echarts-wordcloud.min.js does not introduce NPM packages
Added in the Webpack production packaging configuration:

externals:{    "react":  "React",   // 左边引入时的自定义名字，右边全局变量名    "react-dom":  "ReactDOM",    "jquery":  "jQuery",    "echarts":  "echarts"}

https://doc.webpack-china.org/configuration/externals/#externals
File size reduced by 0.5M after packaging

3. Configure package Remove comments, delete debugger, remove console

newwebpack.optimize.UglifyJsPlugin({    comments:  false,//去掉注释    compress:{        warnings:  false,        drop_debugger:true,        drop_console:true    }}),

4. Ant design introduces on-demand

https://github.com/ant-design/ant-design/issues/2656

2. Can write directly, disadvantage each component needs to write a single line
   import Button from "antd/lib/button"

3. Write in the form of an object
   import { Button } from ‘antd‘;
   If you write in this way, each file will load all the modules of ANTD in the package, see:
   Https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD
   Need to introduce Babel-plugin-import so that each module is loaded on demand and configured in Webpack.config.js

   Loaders:[...{   text: /\. (JS|JSX)$/,   include: Paths.appsrc,   Loader: ' Babel ',   Query: {       cachedirectory: true,       Plugins:[["Import", { LibraryName: "Antd", style: "CSS" }]]//This sentence   }},...]

   Reduce 0.5M per file introduced Antd

5. Delete useless dependencies 6. Echart Chart Lazy Loading

Https://www.npmjs.com/package/react-lazyload

importfrom‘react-lazyload‘;// 在需要懒加载的元素外包裹<LazyLoad height={300} offset={10}><!--元素--></LazyLoad>

7. Replace the UGLIFYJS plugin with Webpack-parallel-uglify-plugin

https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/#%E5%A2%9E%E5%BC%BA%E4%BB%A3%E7%A0% 81%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e5%b7%a5%e5%85%b7
Use Webpack-parallel-uglify-plugin instead of Webpack.optimize.UglifyJsPlugin parallel obfuscation compression js file, packaging time from four minutes to two minutes. Usage is the same as Uglifyjsplugin.

varParalleluglifyplugin=require(' Webpack-parallel-uglify-plugin ');New Paralleluglifyplugin({    Uglifyjs: {        Output: {            Comments:  false  //Remove annotations        },        Compress: {            Warnings:  false,            Drop_debugger:  true,            Drop_console:  true        }    }}),

8. Happypack Multi-Process Execution Loader

Principle
How to configure
Introduction of Happypack
List of supported loader

Module.exports  = {    Module: {        Loaders:[{                Test: /.JSX?$/,                Loader:  "Happypack/loader?id=happybabel",                Exclude: /node_modules/            },            {                Test: /\.JSON$/,                Exclude: /node_modules/,                Loader:  ' Happypack/loader?id=happyjson ',                include:[Path.Join(RootPath, "Src/components"),                    Path.Join(RootPath, "Src/mockdata"),                    Path.Join(RootPath, "Src/views"),]},            {                Test: /\. Less$/,                Loader:  Extracttextplugin.Extract("Style", "Happypack/loader?id=happyless"),                include:[Path.Join(RootPath, "src/components/"),                    Path.Join(RootPath, "Src/assets"),                    Path.Join(RootPath, "Node_modules/antd"),]},]},    Plugins:[Createhappyplugin(' Happybabel ',[{            Loader:  ' Babel-loader ',            Query: {                cachedirectory:  true,                Plugins:[                ["Import", { "LibraryName":  "Antd", "Style":  true }]//' style:true ' will load less files]},        }]),        Createhappyplugin(' Happyjson ',[' Json-loader ']),        Createhappyplugin(' happyless ',[' css-loader?sourcemap!less ']),]}function  Createhappyplugin(ID,Loaders){    return  New  Happypack({        ID:Id,        Loaders:Loaders,        ThreadPool:Happythreadpool,        verbose:  true    });}

Packaging time reduced by 15s

9. Check the include and exclude in the loader to make it more accurate

https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/#%E8%AE%BE%E7%BD% Ae-test-amp-include-amp-exclude

{    Test: /\.JSON$/,    Exclude: /node_modules/,    Loader:  ' Happypack/loader?id=happyjson ',    include:[Path.Join(RootPath, "Src/components"),        Path.Join(RootPath, "Src/mockdata"),        Path.Join(RootPath, "Src/views"),]},{    Test: /\. Less$/,    Loader:  Extracttextplugin.Extract("Style", "Happypack/loader?id=happyless"),    include:[Path.Join(RootPath, "src/components/"),        Path.Join(RootPath, "Src/assets"),        Path.Join(RootPath, "Node_modules/antd"),]},

Narrow the scope of the search file to reduce the time to pack.

Webpack Packaging Performance Optimization