众所周知，SPA单页应用，首次访问需要加载近全部资源，从而导致首页渲染速度很慢。
继而，出现很多性能优化方案：图片/资源懒加载、减少http请求、减小请求资源大小，减少dom操作避免触发回流重绘，gzip压缩，cdn加载等等
- 今天，我们就具体介绍
-
- 我们使用
webpack 4.X打包配置cdn加载
- 我们使用
-
- 在配置前，我们讲一个属性 ：
externals
- 在配置前，我们讲一个属性 ：
cdn加载：
按照官方文档的解释，如果我们想引用一个库，但是又不想让
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', 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/', presets: ['@babel/preset-env'] } }, }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack 4.X', filename: 'index.html', template: path.resolve(__dirname, 'index.html'), inject: true, hash: true, minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true }, cdn: { js: [ 'https://cdn.bootcss.com/axios/0.18.0/axios.min.js', ] } }), ], externals: { axios: 'axios' }, } 这里webpack基本上配置完成
import axios from 'axios' console.log(axios) <!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/
附文章：
原文链接：https://blog.csdn.net/Vue2018/article/details/106474524?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816781685358459%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816781685358459&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-12-106474524-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/214
