了解 CDN
CDN全称叫做“Content Delivery Network”,中文叫内容分发网络。我们用它来提高访问速度。
把一些静态资源:css, .js,图片,视频放在第三方的CDN服务器上,可以加速访问速度。
前端项目中使用CDN好处:
- 减少应用打包出来的包体积
- 加快静态资源的访问-cdn服务器集群-就近返回
- 利用浏览器缓存,不会变动的文件长期缓存
引用 CDN
做相关配置:把排除在外的包,通过公共网络资源方式引入
注意:更改和添加代码一定要在开发环境下!!
<!--在public/index.html下:-->
<script src="https://unpkg.com/echarts@5.3.2/dist/echarts.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/dayjs@1.11.5/dayjs.min.js"></script>
<script src="https://unpkg.com/element-ui@2.15.9/lib/index.js"></script>
<script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
<script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<script src="https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.bubble.css">
问题:我们虽然排除调了第三方的包
打包dist和开发环境都会使用这套配置(cdn地址),并排除掉第三方
生产环境,打包时会以public/index.html,也有那些第三方的cdn地址,所以也能正常运行
但是第一次运行开发环境的速度会有点慢,所以开发环境下想要webpack引入本地的node_modules那些第三方包
解决:
process.env.NODE_ENV 可以根据敲击的命令不同,值也不同,能够一个代码区分不同环境
问题:在public/index.html中有时需要引入cdn地址(生产环境),有时不需要引入cdn地址(开发环境),如何实现自动化的添加与删除cdn地址?
解决:
第一步:配置cdn链接
第二步:注入cdn变量(打包时会执行)
第三步:在index.html利用模板引擎引入js和css
// 需要排除的包,对象
let externals = {}
// 需要配置的cdn链接
let CDN = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境,需要执行以下逻辑
if (isProduction) {
externals = {
/**
* externals对象属性分析:
* '包名':'在项目中引入的名字'**/
axios: 'axios',
dayjs: 'dayjs',
echarts: 'echarts',
'element-ui': 'ELEMENT',
vue: 'Vue',
'vue-quill-editor': 'VueQuillEditor',
'vue-router': 'VueRouter',
vuex: 'Vuex',
'vuex-persistedstate': 'createPersistedState'
}
CDN = {
css: [
'https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css',
'https://unpkg.com/quill@1.3.7/dist/quill.core.css',
'https://unpkg.com/quill@1.3.7/dist/quill.snow.css',
'https://unpkg.com/quill@1.3.7/dist/quill.bubble.css'
],
js: [
'https://unpkg.com/echarts@5.3.2/dist/echarts.min.js',
'https://unpkg.com/vue@2.6.14/dist/vue.js',
'https://unpkg.com/vue-router@3.5.1/dist/vue-router.js',
'https://unpkg.com/vuex@3.6.2/dist/vuex.js',
'https://unpkg.com/axios@0.27.2/dist/axios.min.js',
'https://unpkg.com/dayjs@1.11.5/dayjs.min.js',
'https://unpkg.com/element-ui@2.15.9/lib/index.js',
'https://unpkg.com/quill@1.3.7/dist/quill.js',
'https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
'https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js'
]
}
}
module.exports = defineConfig({
configureWebpack: {
// 打包瘦身
// 当为开发环境时,externals为空对象
// 当为生产环境时,externals对象值为排除第三方包,达到瘦身目的
externals: externals
},
chainWebpack(config) {
// 注入cdn变量(打包时会执行)
config.plugin('html').tap(args => {
// 参数对象添加属性叫cdn,值就是上面CDN对象
args[0].cdn = CDN// 配置CDN给插件
return args
})
}
})
<!-- 模板引擎的语法:ejs,artTemplate
可以直接在html文件的标签里,注入js代码
后来有了vue,vue也有自己的模板语法(指令,插值表达式)
模板都会被代码翻译成原生的标签,让浏览器识别 -->
<!-- 导入样式 -->
<% 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>
<% } %>
总结:
dist瘦身:影响dist的体积,其他第三方包用cdn地址引入到index.html中保证运行
情况1:开发环境
(1):externals无值(不排除第三方包)
(2):index.html里面不引入cdn地址
情况2:生产环境
(1):externals有值(排除第三方包)
(2):index.html引入cdn地址