Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the method of Webpack building code quality compression". In daily operations, I believe that many people have doubts about what is the method of Webpack building code quality compression. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the method of Webpack building code quality compression?" Next, please follow the editor to study!

1. React-router4 implements on-demand loading

General principles for single-page application on-demand loading:

1. Divide the website into small functions and divide them into several categories according to the relevance of each function.

two。 Merge none of the classes into a chunk, and load the corresponding code on demand

3. You cannot load Chunk on demand when you enter the website and you need to see the corresponding function of the screen.

The loading of the split code requires a certain trigger time, that is, when the user has operated or is about to operate the corresponding function, the corresponding code will be loaded (by default, the trigger condition for react-router demand loading is the change of routing)

Implementation conditions:

1. Use plug-ins: npm I react-loadable

two。 Cooperate with the bable plug-in npm I @ babel/plugin-syntax-dynamic-import

Code example:

/ / .bablerc {"plugins": ["@ babel/plugin-syntax-dynamic-import"]} / / sample code Loadable ({loader: () = > import ('. / component'), / / demand loading component loading: Loading, / / processing component loaded loading, error, etc. Delay: 300 / / delayed loading to avoid flicker problem of loading}) / / the Loading component customizes / / accepts three props, where pastDelay: triggered while waiting TimedOut: timeout triggers more than delay;error: error trigger defaults 200ms const Loading = ({pastDelay, timedOut, error}) = > {if (pastDelay) {return} else if (timedOut) {return} else if (error) {return error;} return null;}

Second, extract the common code webpack.optimization

Optimization: {splitChunks: {chunks: "all", cacheGroups: {vendors: {test: / node_modules/, name: 'vendors', minSize: 0, minChunks: 1, chunks:' initial', priority: 2 / / this configuration item is the priority of setting processing The higher the value, the more priority will be given to}, commons: {name: "comomns", test: resolve ("src/components"), / / customizable extension rule minChunks: 2, / / minimum sharing times minSize:0, / / minimum code size Extract priority: 1, / / this configuration item sets the priority of processing. The higher the value, the higher the priority}.

3. Compress the file js\ css

Enable multithreaded parallel compression JS using npm I-D webpack-parallel-uglify-plugin

Optimization: {minimizer: [new ParallelUglifyPlugin ({cacheDir: '.cache /', / / cache compression is not cached by default. Set the storage location to enable test: / .cache / / to match the files to be compressed. Default is / .js $/ same as Loader configuration / / include: [], use rules to select files to be compressed as in Loader configuration / / exclude: [], use rules to remove files that do not need to be compressed as in Loader configuration / / workerCount: 2, start several child processes to perform compression / / sourceMap: false concurrently Whether to output source Map Enable will cause compression to slow down / / uglifyJS: {}. For compressing ES6 code, you cannot use uglifyJS: {/ / compress ES5 code at the same time as uglifyJS. Output: {/ / whether to output readable code, that is, spaces and tabs will be retained. Default is output, in order to achieve a better compression effect. Can be set to false beautify: false, / / whether to retain the comments in the code, default is retained, in order to achieve a better compression effect Can be set to false comments: false}, compress: {/ / whether to output a warning message when UglifyJS deletes unused code. Default is to output warnings: false, / / whether to delete all console statements in the code, and not to delete it by default When enabled, all console statements drop_console: true, / / variables that are defined but only used once will be deleted, such as var x = 1 Y = x, converted to y = 1. Default is No collapse_vars: true, / / extract static values that appear multiple times but are not defined as variables to reference reduce_vars:true}},}),]}

Extract and compress Css

1. Use plug-ins: optimize-css-assets-webpack-plugin, mini-css-extract-plugin

two。 Examples of use:

/ / extract css to a separate file const MiniCssExtractPlugin = require ("mini-css-extract-plugin"); / / optimizeCssPlugin CSS file compression plug-in const optimizeCssPlugin = require ('optimize-css-assets-webpack-plugin'); const extractSCSS = new MiniCssExtractPlugin ({filename:' css/ [name]. [contenthash: 8] .css', chunkFilename: 'css/ [name] _ [contenthash: 8] .css', fallback:'style-loader'}) ...... Plugins: [new optimizeCssPlugin ({assetNameRegExp: /\ .css $/ g, cssProcessor: require ('cssnano'), cssProcessorOptions: {discardComments: {removeAll: true}}, canPrint: true}),]

Webpack configure access to CDN

CDN

To connect the website to CDN, you need to upload the static resources of the web page to the CDN server and use the CDN address to access it.

Using CDN, you can solve the restrictions on parallel downloading of resources, and deal with static resources such as Cookie carrying with domain names.

CDN caching and origin-pull need to set static resource hash reasonably.

Access to CDN will introduce multiple domain names, increase the domain name resolution time, and pre-resolve domain names.

Webpack to realize access

Output.publicPath sets the JavaScript address

Css-loader.publicPath sets the address of resources imported by CSS

Set the Css file address in WebPlugin.stylePublicPath

/ / JavaScript output: {publicPath:'/ / js.cdn.com/js/', path: path.join (_ _ dirname,'. / docs/dist'), / / where the packaged file is stored / / use `chunkhash` for the output JavaScript file name plus hash value (chunkhash: change according to module content Hash: random based on each build) filename: "js/ [name] .chunkhash: 8] .js", chunkFilename: "js/ [name]-[id] .chunkhash: 8] .js",}

Turn on gzip compression

Use plug-ins: npm I-D compression-webpack-plugin

Webpack configuration

Const CompressionPlugin = require ("compression-webpack-plugin"); plugins: [new CompressionPlugin ({filename:'[path] .gz [query]', / / target resource name. [file] will be replaced with the original resource. [path] will be replaced with the original resource path, and [query] will be replaced with the original query string algorithm: 'gzip',// algorithm test: /\. (js | css) $/, / / compress js and css threshold: 10240SQL / only handle resources greater than this value. MinRatio in bytes: 0.8pm / only resources with a compression ratio lower than this value will be processed})]

Use koa when enabled in the background

Const staticCache = require ('koa-static-cache'); import config from'. / configs'; const app = new Koa (); app.use (path.resolve (_ dirname, ".. / dist"), {maxAge: 7 * 24 * 60 * 60, gzip: true, / / enable dynamic: true,}))

Connect to treeShaking and eliminate useless codes

Tree Shaking can be used to find useful code and remove dead code that is not used in JavaScript; but it depends on the import and export of ES6 static flower module syntax import\ export

Webpack access

Modify .babelrc preserve ES6 module discourse sentence

Note that the new version of babel-preset-env has preset babel-preset-es2015,babel to recommend using babel-preset-env instead of babel-preset-es2015, and continuing to use babel-preset-es2015 will issue a warning.

{"presets": [["env", {"modules": false}]], "plugins": ["syntax-dynamic-import"]}

Webpack-- display-used-exports runs the build with-- display-used-exports can track the work of Tree Shaking

Webpack can only correctly analyze how to remove the dead code, and you need to access UglifyJs to deal with it (see above for configuration)

Turn on Scope Hoistion

Scope hoisting namely scope promotion

During the build process, webpack takes advantage of the modular static nature of ES6 to determine module dependencies and promote static dependencies in an bundle to the top. (therefore, you need to configure Babel to enable ES6 modularization like accessing treeShaking)

Principle: analyze the dependency relationship between modules, merge scattered modules into one function as much as possible, the premise can not cause code redundancy, so only modules that have been referenced once can be merged.

Access benefits:

1. Reduced code size

two。 At run time, the code has less memory overhead because fewer functions are created.

Webpack access ModuleConcatenationPlugin built-in plug-in

Const ModuleConcatPlugin = require ('webpack/lib/optimize/ModuleConcatenationPlugin'); plugins: [new ModuleConcatPlugin (), / / Open scope Hoisting]. At this point, the study of "what is the method for Webpack to build code quality compression" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.