During development, it would be better if every time we changed a file, WebPack compiled and built it for us very quickly and the browser saved the status updates; Optimizing the output code, reducing the size, and hashing can speed up the loading of web pages in production environments

I. Optimize packaging construction speed, improve development experience and efficiency

1.1 optimization of Babel – loader

Enable caching, as long as the es6 code has not changed the part, the next rebuild can use the cache, not recompile.

rules: [ { test: /\.js$/, loader: ['babel-loader?cacheDirectory'], include: SrcPath: //exclude: // node_modules/}]Copy the code

1.2 IgnorePlugin to avoid importing useless modules

For example, some libraries contain multiple language packages (moment.js), we only need the Chinese package or English newspaper, so we need to avoid introducing unnecessary language packages,

New webpack.IgnorePlugin(/\.\/local/,/moment/)]Copy the code

1.3 noParse avoids repeated modular parsing

If there are xx.min.js files in the code, the basic has been modular processing, there is no need for recursive parsing of similar files, will be introduced into the project

module: {
    noParse: [/xx\.min\.js$/]
}
Copy the code

1.4 happyPack Multi-process packaging

Enable multi-process packaging to improve build speed

Use: [' HappyPack /loader? Id = Babel '], include: use: [' HappyPack /loader? Id = Babel '] SrcPath}], plugins: [new HappyPack({// use a unique identifier id to indicate that the current HappyPack is used to process a particular class of file ids: Loaders: ['babel-loader? CacheDirectory ']})]Copy the code

1.5 ParallelUglifyPlugin For multi-process compression OF JS

Used in a production environment because there is no need to compress JS code in a development environment

Plugins: [new ParallelUglifyPlugin({// still use UglifyJs compression, but help to enable multi-process UglifyJs: {output: {beautify: False,// Most compact output comments: false,// delete all comments}, compress: {// delete all 'console' statements, compatible with IE drop_console: Collapse_vars: true}}}) collapse_vars: trueCopy the code

1.6 hot update

After changing the code, the browser does not need to refresh, the new code takes effect, the state is retained.

entry: { index: [ 'webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server', path.join(srcPath, 'index.js') ], other: path.join(srcPath, 'other.js') } plugins: [ new HotModuleReplacementPlugin() ] devServer: { xxx: 'xx' hot: True // Enable hot update}Copy the code

After the configuration, modify the style, hot update takes effect, but modify js, hot update does not take effect, then need to set js module to allow hot update listening

If (module.hot){module.hot.accept([' XXX filename '], () => {// Hot update will be done after the js file is updated})}Copy the code

1.7 DllPlugin Dynamic link library plug-in

Front-end frameworks such as Vue and React are bulky, slow to build, relatively stable and rarely upgraded. In this case, the same version is only built once, not rebuilt each time; Since WebPack has built-in DllPlugin, there is no need for us to install additional plug-ins, including two plug-ins DllPlugin(used to package DLL files, as long as packaged, there is no need to pack again),DllReferencePlugin (using DLL files)

React: ['react','react-dom']}, output: [name] indicates the name of the current dynamic link library filename: '[name].dll. DistPath, // store the global variable name of the dynamic link library, such as _dll_react // The reason why we add _dll_ in front of it is to prevent global variable conflicts library: '_dll_[name]'} plugins: [new DllPlugin({// Global variable name of dynamic link library, need to be the same as output. Library // The value of this field is the value of the name field in the manifest.json file name: '_dll_[name]', path: path.join(distPath, '[name].manifest.json') }) ]Copy the code

After configuring webpack.dll.js, define the command to execute webpack.dll.js in package.json

    "script": {
        "dll": "webpack --config build/webpack.dll.js"
    }
Copy the code

DLL. Js and react.manifest.json files are generated after the DLL packaging command is executed. You need to use the react.dll

// in inde.html <script SRC ="./react.dll. Js "></script> [new DllReferencePlugin({// manifest: require(path.join(distPath, 'react.manifest.json'))})]Copy the code

Webpack performance optimization – output code

Can be smaller in size; Reasonable subcontracting without repeated loading; Optimize for faster speed and less memory usage

  • 2.1 Base64 encoding of small pictures, using URL-loader, can reduce network requests
  • 2.2 Bundle plus hash. If the file remains unchanged and the hash value remains the same, the browser can hit the cache
  • 2.3 Extract common code, which can make the whole project smaller
  • 2.4 IngorePlugin ignores unnecessary packages in the library
  • 2.5 CDN acceleration
Output: {publicPath: 'http://cdn.xxx.com'// The path of the referenced file is yes. Prefix the path name with the CDN domain name}Copy the code

Once packaged, the code is put into the server corresponding to the CDN domain name.

  • 2.6 the use of production

When mode is production, packaged code is compressed automatically, Vue/React automatically removes modding code (such as warning in development environment), and tree-shaking is automatically enabled to remove unused code

mode: "production"
Copy the code
  • 2.7 the Scope Hosting

Combining multiple functions into a single function makes your code smaller, creates functions with less scope, and makes your code more readable

module.exports = { resolve: { mainFields: ['jsnext: main','browser','main'] }, plugins: [/ / open the Scope Hosting new ModuleConcatenationPlugin ()]}Copy the code