优化 - CDN使用

CDN定义：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在CND网络中各个服务器中，供用户就近获取

好处：减轻自己服务器压力，就近请求物理延迟低，配套缓存策略

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

步骤：

1、在 html 中引入第三方库的 CDN 地址并用模板语法判断

<% if(htmlwebpackPlugin.options.useCdn)%>
    <link href="http://cdn.booootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2、配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

//...
const config = {
    //...
    plugin:[
        new HtmlWebpackPlugin({
          //...
          //自定义属性，在html模板中 <% if(htmlwebpackPlugin.options.useCdn)%>访问使用
            useCdn: process.env.NODE_ENV === 'production'
        })
    ]
}

if(process.env.NODE_ENV === 'production'){
    config.externals = {
        //key:代码中 import from 后面模板表示字符串
        //value:替换在原地的变量名（要和cdn暴露在全局的变量名一致）
        'axios':'axios'
    }
}

3、两种模式下打包观察效果

Eric小屋

优化 – CDN使用

优化 - CDN使用