Webpack Learning Series (13)/ Optimize vUE project construction speed/WebPackchain (continuously updated)

Summary is to comb through the overall packaging process of Webpack, have a deeper understanding of Webpack. In normal development, it is more about optimizing the WebPack configuration to improve packaging efficiency.

Vue was used for the company’s projects, so some optimizations were made to the default Webpack after vuE-CLI4 was created. Webpack-chain is recommended to configure vUE in vue-CLI documentation. If you look at the vue-CLI source code, you will find that vue-CLI does use webpack-chain when creating webpack configurations, without writing config files. So only vue inspect specifies the options of webpack, not the final options.

The convention is to create vue.config.js in the root directory, and within the code block you can configure webPack options using chainWebpack

module.exports = { chainWebpack: config => { //... Slightly}}Copy the code

In development, we may have a common library/common component that we write ourselves, so we need to write the path of the imported file at import time, if the folder level is too different, it will result in a lot of.. / Impact the experience. So you can optimize it using the Alias property of Webpack.

module.exports = {    chainWebpack: config => {        config.resolve.alias            .set("@", resolve("src"))            .set("assets", resolve("src/assets"))            .set("components", resolve("src/components"))            .set("public", resolve("public"))            .set("common", resolve("src/common"))            .set("network", resolve("src/network"))            .set("views", resolve("src/views"))            .set("router", resolve("src/router"))            .set("store", resolve("src/store"))            .set("mock", resolve("src/mock"))            .set("tests", resolve("tests"))}}Copy the code

Optimization 2: html-webpack-externals-plugin

In addition to the vue.js framework, the most common vUE project is element-UI. For such common libraries, we have two methods: 1. SplitChunks; 2. Html-webpack-externals-plugin enables webpack not to package such libraries and then import them from external CDN.

Although the first method can extract the base library, it will still be packaged every time it is packaged, affecting the construction speed. Therefore, the second method can not only extract the base library, but also accelerate the packaging speed. In addition, the user’s browser caches the base library files after the first load of the base library, which does not change very often. It doesn’t reload the second time, just reads the browser cache. This also makes use of caching to speed up web pages. Kill three birds with one stone.

The following figure shows the html-webpack-externals-plugin configuration for webpack.prod.js in the course

Below is an example of a VUE project using the HTML-webpack-externals-plugin using webpack-chain.

Note: The following code calls end() twice, and each call returns the parent property. For example, the first call to end returns to the resolve property, and the second call to end returns to the config property. The plugin method is then called at the config level. The user method takes two arguments: the first is the html-webpack-externals-plugin; The second is the plug-in’s parameters. TypeError: Found non-callable @@iterator TypeError: Found non-callable @@iterator

module.exports = {    chainWebpack: config => {        config.resolve.alias            .set("@", resolve("src"))            .set("assets", resolve("src/assets"))            .set("components", resolve("src/components"))            .set("public", resolve("public"))            .set("common", resolve("src/common"))            .set("network", resolve("src/network"))            .set("views", resolve("src/views"))            .set("router", resolve("src/router"))            .set("store", resolve("src/store"))            .set("mock", resolve("src/mock"))            .set("tests", resolve("tests"))            .end()            .end()            .plugin('HtmlWebpackExternalsPlugin')            .use(require('html-webpack-externals-plugin'),                [{                    externals:[{                        module: 'vue',                        entry: 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js',                        global: 'Vue'                    },{                        module: 'element-ui',                        entry:'https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js'}}}}]]),Copy the code

Elementui makes packaged Vender files much smaller by extracting common libraries such as Vue. Here the CSS is not miniaturized because only the ELEMent-UI JS file is extracted, and it still has CSS files to import.

Note: there is another 500KB build file in the file below venders, need to close the ugly plugin, let’s see what is it? To reduce the volume

Optimization 3: Add the WebPack efficiency plugin

Optimization 4: Add an ESLint plugin to automatically detect code

Basic uses of ESlint:

        1. npm i eslint -D

2. Eslint –init Follow the prompts to select step by step

Create a root directory. Eslintignore is used the same as gitignore.

/ SRC /assets/** Ignore all folders and files

4. For aliases in webpack optimizations, ESLint will report an error if nothing is set, so special Settings are required, as shown below

5. VueX error handling: Add the following two lines of comments at the top of store JS file

         /* eslint no-shadow: [“error”,{ “allow”: [“state”] }] */

6. Just add instructions to package.json. The instructions below are one for manual detection and one for manual repair. Note: You cannot detect all files in the SRC folder without adding /**.

7. Configure webPack for automatic check

          1) npm i eslint eslint-loader eslint-friendly-formatter -D

2) The vue.config.js configuration requires esLint to be enabled only for development environments.

8. Install ESLint and prettier for vscode plugins

1) Modify settings.json file

2) NPM I eslint-config-prettier eslint-plugin-prettier -d

3) Modify the ESLint configuration file

4) disable the automatic modification of js code by the vuetr plug-in of vscode

I encountered some problems in the configuration of the company computer, and I couldn’t identify the alias when I imported ES6. I don’t know if it was due to the problem of the old version. The company’s vscode is 1.35.1.

1.  npm i eslint-import-resolver-alias eslint-plugin-import -D

2. Configuration files in ESLint

1) Add “Extensions “: [“.js”, “.vue”] under the Alias object.

2) Add “plugin:import/errors” and “plugin:import/warnings” to extends object

3) Add an import to the “plugins” array

To be continued…