“This is the fifth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

1. Minimize the size of packages generated by WebPack or other packaging tools
  • Remove unnecessary plug-ins
  • Remove the devtool option
  • NPM install extract-text-webpack-plugin –save
  • Using webpack. Optimize. UglifyJsPlugin plug-in compression confusion
  • Extracting the core code of third-party libraries like React library is 627 KB, which must be very large when packaged with our source code. So you can set it in WebPack

支那

{
  entry: {
   bundle: 'app'
    vendor: ['react']
  }
  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}
Copy the code
  • List of WebPack plug-ins. For example, when multiple bundles share some of the same dependencies, the CommonsChunkPlugin helps to extract those dependencies into the shared bundles to avoid repackaging. You can add it like this
  • According to the need to pack
2. Debounce/throttling
  • Anti-shaking: A high-frequency event is triggered once within n seconds. If the event is triggered again, the timer is reset

支那

/* * @fn: specifies the function to be executed. * @wait: specifies the time to wait. * @immediate: specifies the time to wait. return function() { let ctx = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(ctx, args); }, interval); }}Copy the code
  • Throttling: High frequency events are triggered once in n seconds and not again in n seconds

支那

/* * @fn: specifies the number of parameters to be executed immediately. * @wait: specifies the number of parameters to be executed immediately. */ throttle(fn, interval); return function() { let ctx = this; let args = arguments; let now = +new Date(); if (now - last > interval) { last = now; fn.apply(ctx, args); }}}Copy the code

Difference: anti-jitter and throttling nature is not the same; Shaking turns multiple executions into the last, and throttling turns multiple executions into intervals.

3. Lazy image loading (when the image appears on the page, assign data-src to SRC)

支那

<img src="http://s4.sinaimg.cn/mw69" alt="1" data-src="http://img4.imgtn.bdimg.com/it/gp=0.jpg">
Copy the code

When the page is loaded, it first negates the value of the data-src attribute of the img tag in the visible area to SRC, and then listens for scroll events to load the image that the user is about to see. This enables lazy loading

4, extract component CSS into separate files

When using a single-file component, CSS within the component is injected dynamically via JavaScript in the form of tags. There is a small runtime overhead, which can be avoided by extracting the CSS for all components into the same file and making the CSS much better for compression and caching

5. GZip compression

Compress files on the server and decompress files on the browser to effectively reduce the amount of data to be transmitted. Start Gzip

  • npm install compression
  • Add the following command to configure server.js

支那

var compression = require('compression') var app = express(); // Try to use compression app.use(compression()) before other middleware;Copy the code
6. Use browser caching

支那

Cache-control: Controls the HTTP cache. Expires: The same request can be cached for a specified time. Max-age: Determines the max-age time. Requests within the max-age time are obtained from the browser cache. Requests outside the max-age time can eliminate the Expires limitCopy the code
7. Image optimization (PNG is recommended)
  • JPG lossy compression high compression ratio does not support transparency
  • PNG supports transparent browsers for good compatibility
  • Webp compression is better in iOS WebView has compatibility issues
  • SVG vector images are relatively simple scenes in picture style

Size comparison:

Generally, PNG ≈ JPG >GIF transparency: PNG >GIF > JPG color richness: JPG > PNG >GIF compatibility: GIF ≈ JPG > PNG

8. Use server-side rendering
9. Load pages or components lazily
10. Use of local storage
  • Cookies can be used to store users’ hobbies and purchasing records, websites they have visited, and advertisements they have clicked on.
  • Session Storage is more suitable for storing the life cycle and the Session level information it synchronizes. This information is only applicable to the current Session. When you start a new Session, it also needs to be updated or released accordingly. For example, the Session Storage of Weibo is mainly to store the browsing footprint of your current Session.
  • One of the characteristics of Local Storage is persistence, sometimes we prefer to use it to store some content stable resources. For example, image-rich e-commerce sites might use it to store Base64 image strings;
  • IndexDB is a non-relational database running in a browser. IndexDB can be seen as an upgrade of LocalStorage. When the complexity and scale of data rise to the extent that LocalStorage cannot solve, we can undoubtedly ask IndexDB to help.