1. How to deal with the excessively large Vue project after packaging

Config /index.js build:{productionSourceMap: false}

Extract -text-webpack-plugin: extract-text-webpack-plugin: extract-text-webpack-plugin: extract-text-webpack-plugin NPM install extract-text-webpack-plugin –save-dev Plugins :[new ExtractTextPlugin(‘static/ CSS /styles.[contenthash].css’)] Where contenthash is used, WebPack generates hash values based on the content.

3. Specific usage methods of uglifyjsPlugin can also be used: NPM I -d uglifyjs-webpack-plugin install the ugly JS plugin and introduce it to const UglifyJsPlugin = in the production configuration require(‘uglifyjs-webpack-plugin’) module.exports = { NODE_ENV: ‘”production”‘, plugins: [ new UglifyJsPlugin() ] }

4. Use the CommonChunk plugin to extract large public dependencies into a JS and only load them once. Chunk means huge meaning two words together are huge public.

5. Compress using GZIP

Principle of responsive data

Vue uses Object.definedProperty() to redefine all attributes passed in by the user to data. Hijack user incoming data, add get/set methods to all attributes in it, collect dependencies when attributes are accessed, and notify when attributes are modified. 2. From the perspective of source code to be detailed: The initData() method is called in the initState method initState() in the State. The purpose of this method is to initialize data passed in by the user. Observe data using the observe() method to see if the incoming data has an __ob__ attribute. If not, new Observer(); Pass this data as a parameter to the Observer. The Observer class consists mainly of a constructor and a walk() method. In the Observer constructor it is only necessary to determine whether the data passed is of object type or data type. If it is an Object type, the following walk method is called to traverse the Object, and defineReactive() is called during the traverse. Within this method, object.defineProperty () is used to redefine the get/set method of the Object, and finally the data response is realized.