衆所周知，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/
附文章：