众所周知，SPA单页应用，首次访问需要加载近全部资源，从而导致首页渲染速度很慢。
继而，出现很多性能优化方案：图片/资源懒加载、减少http请求、减小请求资源大小，减少dom操作避免触发回流重绘，gzip压缩，cdn加速等等
- 今天，我们就具体介绍
cdn加速： -
- 我们使用
webpack 4.X打包配置cdn加速
- 我们使用
-
- 在配置前，我们讲一个属性 ：
externals
- 在配置前，我们讲一个属性 ：
按照官方文档的解释，如果我们想引用一个库，但是又不想让
webpack打包，并且又不影响我们在程序中以CMD、AMD、ES6等方式进行使用，那就可以通过配置externals
我们项目开发中可以使用
externals的方式，将这些不需要打包的资源从构建逻辑中剔除出去，而使用cdn的方式引用它们
- 因为浏览器是多进程，多线程，
http请求又是独立线程，可以并发加载资源
接下来，我们根据需求配置webpack.config.js
安装：
npm i html-webpack-plugin -D // 打包生成html
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 模式，可选为 development 和 production 默认为produciton
entry: './src/index.js', // 入口文件
output: {
filename: 'js/build.js', // 出口路径
publicPath: './', // 公共路径
path: path.resolve(__dirname, 'dist') // 出口目录
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
include: path.join(__dirname, 'src'),
exclude: '/node_modules/', // 排除node_modules，第三方代码已经处理，不需要二次处理
presets: ['@babel/preset-env']
}
},
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack 4.X', // 文件标题
filename: 'index.html', // 文件名
template: path.resolve(__dirname, 'index.html'), // 依赖模板
inject: true, // js放置位置： true -- body 底部 | head -- head标签 | false -- 不加载js
hash: true, // 添加hash
minify: {
collapseWhitespace: true, // 移除空格
removeAttributeQuotes: true, // 移除引号
removeComments: true // 移除注释
},
cdn: {
js: [
'https://cdn.bootcss.com/axios/0.18.0/axios.min.js', // 配置cdn资源
]
}
}),
],
externals: {
axios: 'axios' // 这里以axios库为示例
},
}
这里webpack基本上配置完成
// src/index.js
import axios from 'axios'
console.log(axios)
// index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--ejs模板语法 引入title-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<section id="root"></section>
<!--ejs模板语法 cdn加载-->
<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
：：：测试效果 ：：：
不开启cdn加速：
我们可以看到axios已经打包进入vender.main.js中
开启cdn加速：
我们可以看到打包忽略axios，并且http请求线程请求 axios.min.js，并且代码中可以正常引入/使用axios
附cdn资源分发站：
BootCDN：https://www.bootcdn.cn/
UNPKG：https://unpkg.com/
附文章：