A,chunk-vendors.jsIntroduction to the

  • As the name implies, chunk-vendor. js is a bundle that bundles all modules that are not one’s own, but are from other parties, called third-party modules or vendor modules.

  • In general, this means that all modules from the project /node_modules directory (and only) package all third party packages from /node_modules into chunk-vendor.js.

  • If you put all third-party packages into a single file, the problem of file size will naturally occur.

Second,chunk-vendors.jsFile size analysis

  • Create a new VUE project, run it to the server by packaging it, and then access it to get chunk-vendors. Js as 182 B

  • Chunk-vendors. Js files are enlarged by installing third-party components. After installing third-party components, import them in main.js and run NPM Run Build again to package them.

    • NPM I — Save ant-design-vue, 1.9MB after installation!

      import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
Copy the code

    • NPM I element-uI-s, 2.6MB immediately after installation!

      import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Copy the code

    • Do not look at the back of the Time so short, because this is the Intranet local access fast, if to the external network with the server bandwidth, performance related, but the file is so large, loading is slow, it needs to be dismantled to carry out block loading, not blindly upgrade the server to solve the problem, after all, to the money!

    • Package the file directory (JS, CSS) that has not been subpacked yet.

3. Method 1:Compression – Webpack-plugin plugin solution

Four, method two

  • There is also a webpack front configuration to pack third party packages separately, so that not all third party packages are packed into chunk-vendor.js files, and if there are oversized files in third party packages, they can be too large.

  • So you can use both of them together, you can choose one of them, you can use both of them together, you can choose one of them depending on the situation, or you can use both.

    const path = require('path'); const webpack = require('webpack') const CompressionPlugin = require('compression-webpack-plugin') const zlib = require('zlib') const isProduction = process.env.NODE_ENV === 'production' module.exports = { devServer: { disableHostCheck: true }, configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, './src'), '@i': path.resolve(__dirname, './src/assets'), } }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), New CompressionPlugin({filename:) {compression: webpack-plugin (); '[path][base].gz', algorithm: 'gzip', test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: New CompressionPlugin({filename: 0}), // create a.br file for zlib. '[path][base].br', algorithm: 'brotliCompress', test: /\.(js|css|html|svg)$/, compressionOptions: { params: {[Zlib.constants.BROTLI_PARAM_QUALITY]: 11}}, threshold: 10240, minRatio: 0.8})] // Enable separation JS optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name (module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName const packageName = module.context.match(/[\\/]node_modules[\\/](.*?) ([\\/]|$)/)[1] // npm package names are URL-safe, but some servers don't like @ symbols return `npm.${packageName.replace('@', '')}` } } } } } } }Copy the code

V. Other methods

  • For example, some large JS and CSS can be linked through CDN, which can be used together with a variety of schemes.

  • Other Reference Schemes