noParse

For source code without AMD/CommonJS, build performance is improved by configuring noParse to ignore WebPack for recursive parsing and processing. Jq, for example, is so large and doesn’t adopt modular standards that it doesn’t make sense for WebPack to parse it.

NoParse: /jquery/,// Does not parse dependent libraries in jqueryCopy the code

IgnorePlugin

Ignores third-party package-specified modules so that they are not packaged in. For example, the date-handling library moment.js will introduce all locale files when referenced, resulting in a large package size. You can use webpack’s IgnorePlugin to ignore locale files and load only the required language packages, reducing the packaging volume

// webapck.config.s plugins: [ new webpack.IgnorePlugin(/\.\/locale/, /moment/), ] // index.js import moment from 'moment'; import 'moment/locale/zh-cn'; Locale.locale ('zh-cn'); Let r = moment().endof ('day').fromnow (); console.log(r)Copy the code

dllPlugin

DllPlugin: dynamic link library plug-in. For third-party modules with high reusability, it is removed and packaged into the dynamic link library. When building again, it does not need to re-package the module, but only needs to re-package the business code, thus improving the construction speed. For third-party modules, once packaged with Webpack, you need to define a variable to receive the packaged output. You can specify this variable in the Library

// webpack.config.react.js lets path = require('path'); let webpack = require('webpack'); module.exports = { mode: 'development', entry: { react: ['react', 'react-dom'], }, output: { filename: '_dll_[name].js', // generate file name path: path.resolve(__dirname, 'dist'), library: '_dll_[name]', // Export value If the generated output file is imported as a script tag in an HTML page, the variable '_dll_[name]' should be bound to the return value of the entry file. LibraryTarget: "window". // Configure how to expose library, if commonjs var this}, plugins: [new webpack.dllplugin ({name: '_dll_[name]', // name corresponds to the path of the library above: Path.resolve (__dirname, 'dist', 'manifest.json'), // Generate manifest.json task list to find the file}),],}; // webpack.config.js official webpack file plugins: [new webpack DllReferencePlugin ({/ / packaging According to the manifest. Json references in the dynamic link library file manifest: path.resolve(__dirname, 'dist', 'manifest.json') }), ], <body> <div id='root'></div> <script SRC ="/_dll_react.js"></script> </body>Copy the code

When packing, the manifest.json task list first looks to see if it has been packed. If you don’t find it in the listing, go to the third-party library to package the configuration.

Happypack

Webpack running on Node.js is a single-threaded model. Happypack can divide the file parsing task into multiple sub-processes for concurrent execution. After the sub-processes process the task, they send the results to the main process to improve the speed of project components.

module: { rules: [{ test: /\.js$/, use: Id =js', // replace babel-loder with happypack-loader and exclude the happypackLoader from the plugin: /node_modules/, }], }, plugins: [ new Happypack({ id: 'js', use: [{ loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react', ], }, }], }), ],Copy the code

If the file is small, it may be even slower to package with multiple threads because it takes some time to distribute it off the shelf

Webpack optimizes automatically

tree-shaking

This is used to describe removing unreferenced code from JavaScript context. It automatically removes unreferenced code from JS when packaging in production environment. It only applies to import syntax and is not supported by require. Tree-shaking active removal can be configured in the development environment,

import calc from './test.js'; // let calc = require('./test.js'); // The ES6 module puts the result in default console.log(calc.default.sum(1, 2));Copy the code

Scope-hosting scope upgrade

Webpack was introduced to separate modules and import and export modules using __webpack_require__. Scope-hosting can directly import files to the top of the importer, which significantly reduces the amount of code. In addition, the running speed is also improved without using __webpack_require__ to call the module many times.

let a= 1, b = 2, c = 3, d = 4;
let e = a + b + c + d;
console.log(e);
Copy the code

SplitChunks separate common code blocks

Replace commonChunkPlugins for multi-page applications

Optimization: {splitChunks: {cacheGroups: {common: {// minChunks: 0, // minChunks: 0, // Number 2, / / the public is more than 2 times from chunks: 'initial', / / since entry}, vendor: {/ / will refer to the separate out of the third-party modules test:, / node_modules/minSize: 0, minChunks: 2, chunks: 'initial', priority: 1, // Specify the weights, first remove the third-party modules, then remove the common. Otherwise, the third party will be separated from the other code in the same file}},}},Copy the code

Relevant learning: zxc0328. Making. IO / 2018/06/19 /…

Lazy loading @ Babel/plugin – syntax – dynamic – import

// webpack.config.js module: { rules: [{ test: /\.js$/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react', ], plugins: ['@babel/plugin-syntax-dynamic-import' // use lazy add-on],},},}], } // index.js let btn = document.createElement('button'); btn.innerHTML = 'hello'; Btn.addeventlistener ('click', () => {// es6 draft syntax through jSONp dynamic load file, Return a promise import('./source.js').then(data => {console.log(data.default); // The result is mounted in the default attribute}); // console.log('click'); }); document.body.appendChild(btn);Copy the code

Hot update HMR

HotModuleReplacementPlugin allowed at run time to update all types of modules, without the need for a completely refreshed. Do not enable HMR in production.

DevServer: {hot: true, // Start hot update port: 3000, open: true, contentBase: './dist',}, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html,}), new webpack. HotModuleReplacementPlugin (), / / hot update plug-in new webpack. NamedModulesPlugin (), / / print update module path], // index.js import str from './source.js'; Module.hot.accept ('./source.js', () => {let STR = require('./source.js').default; Console. log(STR, 'file updated '); })}Copy the code