Configure externals in webpack to reduce the volume after packaging
In daily project development, we will use various third-party libraries to improve efficiency, but the problem that comes with it is that the volume after packaging is too large, resulting in too long blank pages when loading, which gives users too poor experience. To do this we need to reduce the volume to solve this problem essentially.
The external extensions of webpack can be effectively solved.
The externals configuration option provides a method to "exclude dependencies from output bundles". Instead, the created bundles depend on those dependencies that exist in the consumer's environment. Prevents certain import packages (packages) from being packaged into a bundle, but instead obtains these extended dependencies from the outside at runtime.
webpack's externals official reference document portal, please click here →externals
Let’s take the Vue project as an example to introduce the use of externals. The project references third-party libraries such as vue, vue-router, axios, element-ui, and qs. So our goal is to exclude these from the output bundle.
1. In /build/, configure externals
// The key in externals is the name that requires the following, and the value is the method name exposed by the third-party library = {
//...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'Element',
'qs': 'Qs'
}
}
2. In /src/ and /src/router/, remove the import related to it and change to require-based import.
// /src/
// Removeimport Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'
import axios from 'axios'
import Qs from 'qs'
(ElementUI)
// Add toconst Vue = require('vue')
const ElementUI = require('element-ui')
const axios = require('axios')
const Qs = require('qs')
// /src/router/
// Removeimport Router from 'vue-router'
(Router)
// Add toconst Router = require('vue-router')
3. In /, introduce the corresponding js file and css file (CDN address) through CDN:)
.Use unpkg to provide it as a third party.If I want the axios package, enter the URL as/axios/(A slash at the end means that you want to query the list of all versions of the library). Then you can select the corresponding version such as/[email protected]/. Among them, @0.18.0 is the library version number, and if not written, the default is the latest version.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="/element-ui/2.3.8/theme-chalk/" rel="external nofollow" rel="stylesheet"> <title>ConfigurationwebpackmiddleexternalsTo reduce the volume after packaging</title> </head> <body> <div ></div> <script src="/vue/2.5.15/"></script> <script src="/vue-router/3.0.1/"></script> <script src="/axios/0.18.0/"></script> <script src="/element-ui/2.3.8/"></script> <script src="/qs/6.5.2/"></script> </body> </html>
4 The code is packaged into a compressed package. The browser supports automatic decompression and will load the compressed package.
Modify in config\
productionGzip: true,
//The corresponding package needs to be downloaded npm install --save-dev compression-webpack-plugin
Supplementary knowledge:After Vue is packaged, the map file will appear, which is very large
The largest volume after the build command is actually the .map file. How to set webpack to prevent the .map file from being compiled?
Solution:Go to config/ to change a parameter:
productionSourceMap:false
Change this to false. Otherwise, some map files will appear in the final packaged file.
The function of map file: After the project is packaged, the code is compressed and encrypted. If an error is reported at runtime, the output error message cannot be accurately known where the code reported an error.
With map, you can just like unencrypted code, and the exact output is what the row and column are wrong.
The above vue project's volume reduction operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.