Ask questions

Do we need to package all third party libraries into our own projects?

Don’t need to!

The XLSX package is quite large (715K) and this type of plugin doesn’t need to be updated for a long time, so there’s no need to pack it!

Train of thought

  1. Don’t punch these bags in when you pack

  1. Import these packages from the network

Webpack configuration excludes packing – packing thin

The target

You can configure vue-CLI to exclude some packages that are not normally needed from the package file.

For example: Let WebPack not pack vue XLSX and Element

use

Find vue.config.js and add externals as follows:

ConfigureWebpack: {// configureWebpack the title of the page for the single-page application // omit the other.... Externals: {/** * Externals object attribute parsing. Basic format: * * 'package' : 'is introduced in the project of the name' * * / 'vue' : 'vue', 'element - the UI:' ElementUI ', 'XLSX' : 'XLSX'}, resolve: {alias: {' @ ': Resolve (' SRC ')}}} copy the codeCopy the code

Running the package again, we see that the size of the package has been greatly reduced: the top three packages are no longer in the target file for the package.

The Webpack configuration excludes packaging – referencing network resources

The target

Do the configuration: use a public network resource to import packages that are not included in index.html

Configuration – Takes effect in the production environment

Note that file resources can still be pulled from the local node_modules during project development, and only external resources need to be used once the project is online. At this point we can use environment variables to differentiate. Details are as follows:

In the **vue.config.js** file:

let externals = {} let cdn = { css: [], js: []} const isProduction = process.env.node_env === 'production' if (isProduction) {externals = {/** * Externals object attribute parsing: * 'package name ':' Name introduced in the project '*/ 'vue': 'vue',' element-UI ': 'Element ', 'XLSX' : 'XLSX'} CDN = {CSS: [' https://unpkg.com/element-ui/lib/theme-chalk/index.css '/ / element - the UI CSS stylesheet], js: [ // vue must at first! 'https://unpkg.com/[email protected]/dist/vue.js', / / vuejs' https://unpkg.com/element-ui/lib/index.js', / / element - UI js' https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', / / XLSX]}}Copy the code

Link: juejin.cn/post/702594… Source: Rare earth mining copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.