zoukankan      html  css  js  c++  java
  • [Webpack] Externalize Dependencies to be Loaded via CDN with webpack

    We can separate our custom application code from the common libraries we leverage, such as React and ReactDOM. In this lesson we'll configure webpack to treat React and ReactDOM as external dependencies. Then we'll update our HTML template to conditionally include the CDN links for those libraries for production builds.

    Why to do this?

    One of the main advantages of using a CDN is reduced latency, so if you cannot, for some reason, host your main bundle on a CDN, you can at least speed up loading of some dependencies. In addition to that, if you use a commonly used CDN, you can potentially take advantage of the browser's cached copy of React and ReactDOM from other sites that are also hosting from that CDN

    The reduced latency comes from the fact that a CDN will serve files from a POP (point of presence) that is geographically closer to the requester. The reduced latency is a pure physics problem of distance. This doesn't solve other network issues like congestion and throughput limits, but it's a step in the right direction.

    We only want to do this for production:

    // webpack.config.prod.js
    
    const merge = require('webpack-merge')
    const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
    const baseConfig = require('./webpack.config.base')
    
    module.exports = merge(baseConfig, {
      mode: 'production',
      plugins: [new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        reportFilename: 'bundle_sizes.html'
      })],
      externals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    })

    We add 'exernals' prop, it is a key value pair, key is the package name, value is the variable name:

    import React from 'react'
    import ReactDOM from 'react-dom'

    Github

  • 相关阅读:
    ​综述 | SLAM回环检测方法
    从零开始一起学习SLAM | 用四元数插值来对齐IMU和图像帧
    2019-2020年值得关注的9个AR发展趋势
    计算机视觉方向简介 | 图像拼接
    “人工智能资源对接平台”发布,找人、找技术不再难!
    解决上不了网的特例
    机械键盘简介
    笔记本升级方案
    CSS构造表单
    CSS构造表格
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10554718.html
Copyright © 2011-2022 走看看