Shulou(Shulou.com)05/31 Report--

one。 The request content is too large.

After the project is packaged, we often find that the packaged files vendors and app files are particularly large, in which the app.js file contains the logic code of each page in the project, and vendor.js places some code common to the components of each page. As the complexity of the project increases, so does the size of the file. In the case of limited bandwidth, it often takes a long time to download these two files.

Solution:

Routing lazy loading: splitting code blocks

Vue supports asynchronous components, that is, a Promise,Promise can be used where the component is used and a component object will eventually be sent back through resolve. Webpack's dynamic import approach allows code to be packaged in blocks and returns a Promise (exactly what asynchronous components need). Using import in the routing configuration table can divide each page component into different code blocks, and then load the corresponding components only when the route is accessed, thus avoiding packaging all the content in a chunk, thus "loading on demand" and greatly improving the response speed. Introduce routing components as shown in the following figure:

CDN introduction

The business code is updated and iterated frequently. In order to allow browsers to cache our static files for as long as possible, if we package the class library code with the business code, the class library code will be updated with the update of the business code, instead of using the cache in the browser for a long time. We want to use the cache to reduce browser traffic and improve the loading speed of users' browsers, so we split it out separately for packaging. Generally, the third-party package will have a script introduction solution, just ignore the formulation of the third-party package when packaging, and then add the corresponding import link to the template.

First of all, there is no vue.config.js to create in the project root directory.

The specific code is as follows:

Const cdn = {/ / ignore packaged third-party libraries externals: {vue: 'Vue', "element-ui": "ELEMENT",' vue-router': 'VueRouter', vuex:' Vuex', axios: 'axios', moment: "moment", echarts: "echarts"} / / use js through cdn: ['https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',' https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js', 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js', 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',' https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js', 'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js', "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",] Css: ["https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"],} module.exports = {publicPath:'/ CRM/dist/', / / publicPath:'. /' ChainWebpack: config = > {config.plugin ('html') .tap (args = > {args [0] .cdn = cdn return args}) config.plugins.delete (' prefetch')}, / / ignore the third-party library configureWebpack: {externals: cdn.externals},}

Then add it to the corresponding location of the pulic/index.html template (add the location to see for yourself)

Another benefit of using CDN is that it can speed up packaging.

Compress the requested resources

Generally, when we deploy to the server, we use nginx as the proxy server, and all requests are forwarded through nginx. We can enable gzip by configuring nginx.

Server {gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;}

This can greatly improve the download speed of static resources.

But there is another point, that is, every time the browser requests from the server, the server will perform a compression operation, when the number of requests is very large, the compression operation will also affect the response speed of the server, so we can directly package the file into a compressed package. In this way, there is no need for the server to pack frequently:

Installation dependency: compression-webpack-plugin

Npm install compression-webpack-plugin-save-dev

Vue.config.js modification:

Const CompressionPlugin = require ('compression-webpack-plugin'); const productionGzipExtensions = /\. (js | css | json | txt | html | ico | svg) (\?. *)? $/ iEquipmodule.modulus = {publicPath:'. /', productionSourceMap: false, configureWebpack: {...}, chainWebpack: config = > {config.resolve.alias.set ('@', resolve ('src')) If (process.env.NODE_ENV = 'production') {config.plugin (' compressionPlugin') .use (new CompressionPlugin ({filename:'[path] .gz [query]', algorithm: 'gzip', test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 DeleteOriginalAssets: true})) }},}

Nginx configuration

Server {gzip_static on; gzip on; gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;}-.http requests too many times

There is a limit to all things, that is, what we say will be reversed at the extreme. We use on-demand loading, code segmentation and packaging, when the project is getting larger and larger, more and more modules, after the project is packaged, we will find that a lot of files will be generated. For front-end performance, although each file is smaller, it may mean more overhead for establishing and closing network connections, so in the practice of front-end optimization, you usually need to strike a balance between the number of files and the size of a single file. Here, we can use the plug-in MinChunkSizePlugin provided by webpack to keep the chunk volume above the specified size limit by merging chunk smaller than the minChunkSize size.

Solution:

Vue.config.js configuration

Module.exports = {publicPath:'. /', productionSourceMap: false, configureWebpack: {plugins: [new webpack.optimize.MinChunkSizePlugin ({minChunkSize: 10000 / / Minimum number of characters})]},} this is the end of the content on "how to package, merge and compress the Vue project to optimize the response speed of web pages". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.