CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。
目的：将引用的外部
js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。
首先创建一个引入element-ui的vue项目，对比两种方式打包后的大小
-
未配置
cnd之前vendors.js文件大约是800k：
-
配置之后：
vendors.js文件大约是80k
-
方法如下：
- 在
vue.config.js进行配置
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
externals = {
// vue: 'Vue',
'element-ui': 'ELEMENT'
}
cdn = {
css: [
'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
'https://unpkg.com/element-ui@2.13.2/lib/index.js' // element-ui js
]
}
}
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
port: 8080,
// 开启服务器后自动打开浏览器
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: {
// 在webpack的name字段中提供应用程序的标题，
// 它可以在index.html中访问，以注入正确的标题。
name: "test name",
externals: externals,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
// 提高第一屏的速度，建议打开预加载
config.plugin('preload').tap(() => [
{
rel: 'preload',
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
config.plugin('html').tap(args => {
args[0].cdn = cdn // 配置cdn给插件
return args
})
}
}
- 2.在
public/index.html文件配置
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
增加引入样式和引入js两段即可
由于是多个任务异步进行加载，即使不使用
CDN，服务器有条件的也可以将静态文件部署到自己服务器，首页加载速度也是能够有很明显的提升
网友评论