Of Stack

The vue project implements volume reduction operations for app. js and vender. js

  • 2021-09-16 06:13:32
  • OfStack

Configure externals in webpack to reduce the volume of packaged vendor. js

In daily project development, we will use various third-party libraries to improve efficiency, but the resulting problem is that the packaged vendor. js is too large, which leads to too long blank pages when loading and poor experience for users. To do this, we need to reduce the size of vendor. js to essentially solve this problem.

External extension of webpack (externals) can be effectively solved.

The externals configuration option provides a way to "exclude dependencies from the output bundle." Instead, the created bundle relies on dependencies that exist in the user environment (consumer 's environment). Prevent some import packages (package) from being packaged into bundle, and instead obtain these extended dependencies (external dependencies) externally at runtime (runtime).

externals official reference document portal of webpack, please stamp here → externals

Take the Vue project as an example to introduce the use of externals under 1. The third party libraries such as vue, vue-router, axios, element-ui, qs are referenced in the project, so our goal is to exclude these dependencies from the output bundle.

1. Configure externals in/build/webpack. base. conf. js 


// externals In key It is needed later require The name of, value Is the first 3 Method name exposed by square library 
module.exports = {
 //...
 externals: {
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'axios': 'axios',
 'element-ui': 'Element',
 'qs': 'Qs'
 }
}

2. In the/src/main. js and/src/router/index. js, remove the above related import introduction and change it to require introduction 


// /src/main.js
//  Remove 
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import Qs from 'qs'
Vue.use(ElementUI)
//  Add 
const Vue = require('vue')
const ElementUI = require('element-ui')
const axios = require('axios')
const Qs = require('qs')
// /src/router/index.js
//  Remove 
import Router from 'vue-router'
Vue.use(Router)
//  Add 
const Router = require('vue-router')

3. In/index.html, introduce the corresponding js file and css file through CDN (CDN address: https://www.bootcdn.cn)

. Select unpkg as the third party. If I want an axios package, enter the URL as https://unpkg. com/axios/(a slash at the end indicates a list of all versions of the library you want to query). Then you can select the corresponding version such as https://unpkg.com/axios @ 0.18. 0/index.js. Where @ 0.18. 0 is the version number of the library, and if it is not written, it defaults to the latest version. 


<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="external nofollow" rel="stylesheet">
 <title> Configure webpack Medium externals To reduce after packaging vendor.js Volume of </title>
 </head>
 <body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>
 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
 </body>
</html>

4 code is packaged into a compressed package. If the browser supports automatic decompression, the compressed package will be loaded

Modify in config\ index.js

productionGzip: true,

//The corresponding package npm install--save-dev compression-webpack-plugin needs to be downloaded

Additional knowledge: After Vue is packaged, map file will appear, which is very large

After build command, the largest volume is. map file. How to set webpack to prevent compiling. map file?

Solution: Change one parameter in config/index. js:

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 the operation times an error, the output error message cannot accurately know where the code reports an error.

With map, you can just like unencrypted code 1, and the exact output is which 1 row and which 1 column have errors.

Related articles: