Webpack's experience sharing

Webpack is a module wrapper. Its main goal is to package JavaScript files together, the packaged files for use in the browser, but it is also capable of converting (transform), packaging (bundle) or package, this article mainly share with you webpack some experience, Hope to help everyone.

Cache

Generate the file name [name].[contenthash:8].js , combined with Max-age + CDN cache.

Web page Loading

Html

Used to be a fixed HTML, HTML-"version number JS file (through Webpack)-" Through the version number to determine the specific JS. (It's not reasonable to think about it now, although not so heavy with the background)

Now is the change of HTML, through Htmlwebpackplugin (Webpack generated, which contains the version number of JS)

This also saves a serial time (pull version number file). At the same time also easy to do grayscale, such as the release of demand, let a part of the user experience first, dynamic HTML to the background can be. (fixed HTML is not so easy to do)

CSS Separation

In the observation of the wheat, CSS changes will be very small, thanks to the react-gm of the class name. Since the change is small, it is good to separate the CSS, using Extracttextplugin to separate the CSS.

After the separation to reduce the JS size, do not block JS, while CSS and JS can be pulled at the same time.

Common

New Commonschunkplugin ({name: ' Commons '})

Look at the common code after packaging, you will find that the other module ID and hash will be hit in the common, so every time Commons files will change, it is difficult to do the cache.

Provide a list of two files, you will find the Webpack bar ID and hash in the manifest file. This allows the Commons to be cached. BTW, did not see the official website has introduced, see said sound.

New Commonschunkplugin ({names: [' Commons ', ' Manifest ']})

Local development

Talk about the agent, the local start is their own services, no back-office services, naturally need to proxy to a place. Available through Devserver.proxy. can also proxy to the external network to troubleshoot bugs, are the source code, check the bug very fast.

"Proxy": {    "/ticket/*": {      "target": "http://dev.guanmai.cn:7413",      "Changeorigin": True    }}

Packing speed

Dllplugin

When the project is large, it is necessary to hit a lot of packages, resulting in a very long packaging time. The official recommendation is to make the infrequently-changed files into DLLs.

We'll react react-dom prop-types classnames mobx mobx-react lodash moment big.js call in the project.

The online profile describes the DLL's filename is [name]_[hash].dll.js, we are [NPM version]_dll.js npm version is Package.json version read in.

Why not hash instead of NPM version? We had a problem thinking about two packs, how do we tell if the DLL needs to be repackaged? If it is a hash how to do (for recommendation). With NPM version, as long as version changes we will repackage, such as upgrading the react, we will be version +, will be repackaged.

Happypack

Happypack to build speed big hint, can multithreaded packaging, cache also let rebuild speed up.

Devtool

Developed with Eval, production with source-map (for troubleshooting display problems, at the expense of packing speed, within acceptable range)

Babel-loader

Remember Cachedirectory

Noparse && Alias

Some libraries do not need to be parsed, the Noparse configuration is not resolved, and alias points to the X.min.js file.

Tree shaking

No use, no feeling yet. There's a good article about your tree-shaking that doesn't have any eggs.

Compression

Uglifyjsplugin

It started with Webpack.optimize.UglifyJsPlugin, then the 1.x version, Webpack based on uglify-js@2.x.

Now Webpack alone, but also a lot of features, support cache, support multi-core compression, I tried the next speed or quite fast. Webpack.optimize.UglifyJsPlugin is actually uglifyjs-webpack-plugin.

What makes me wonder is that the authorities are based on uglify-es. But I see the dependence or the UGLIFY-JS. Strange.

Uglifyjsparallelplugin

In the official not come out before the use is Webpack-uglify-parallel, support multi-core. The speed and the uglifyjs-webpack-plugin are not much difference.

The article was turned over to GitHub and was found to be obsolete in July, and was integrated into the official.

Other

Babel out of the Babel-minify-webpack-plugin, stay on the sidelines.

Scripting CDN

Some JS (Gm-fetch Babel-polyfill) is very few and very few changes, with webpack packaging a bit wasteful, can be obtained through the CDN, script form into the HTML document.

Analysis

There are charts, very intuitive analysis. I like it better.
Webpack-monitor

The veteran is Webpack-bundle-analyzer.

Related recommendations:

Web uses Webpack to build instance code for front-end projects

Webpack Configuration Method Summary

node.js configuration methods in the article FMT article__content webpack