前言
由于項目打包后體積過大， 還有就是項目中首頁加載過慢， 過慢的原因就是js,css 靜態資源第一次加載的時間長
我的vue腳手架版本是@vue/cli 4.3.1 我發現在public下的html頁面直接引入不好使通過查資料，以及網上大佬才得知 新版腳手架用下面方式部署cdn (方法不是唯一的)
1.在vue.config.js中 沒有的話和mian.js同級下創建一下
const path = require('path')
const webpack = require('webpack')
function resolve(dir) {
return path.join(__dirname, dir)
}
const CompressionPlugin = require('compression-webpack-plugin')
// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development'
// 本地環境是否需要使用cdn
const devNeedCdn = true
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
vant: 'vant',
moment: 'moment',
JsBarcode: 'jsbarcode',
VueLazyLoad: 'vue-lazyload',
ElementUI: 'element-ui'
},
// cdn的css鏈接
css: ['https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vant@2.9.4/index.css',
'https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css'
],
// cdn的js鏈接
js: [
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue@2.6.11/vue.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vuex@3.4.0/vuex.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue-router@3.2.0/vue-router.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vant@2.9.4/vant.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/axios@0.19.2/axios.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/moment.js/2.29.0/moment.min.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/jsbarcode/3.11.3/JsBarcode.all.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/vue-lazyload/1.3.3/vue-lazyload.js',
'https://awepos-static-file.oss-accelerate.aliyuncs.com/npm/element-ui@2.14.1/lib/index.js'
]
}
module.exports = {
// 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
productionSourceMap: false,
lintOnSave: false,
configureWebpack: (config) => {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|.\css/, // 匹配文件名
threshold: 10240, // 對超過10k的數據壓縮
// deleteOriginalAssets: false, // 不刪除源文件
minRatio: 0.8,
algorithm: 'gzip'
}),
// 規定js文件的個數
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
],
// 用cdn方式引入，則構建時要忽略相關資源
externals: cdn.externals
// if (isProduction || devNeedCdn) {config.externals = cdn.externals}
}
},
publicPath: './', // 本地環境使用
// publicPath: 'https://awepos-static-file.oss-accelerate.aliyuncs.com/mb', // 線上環境使用 靜態文件 js css 部署的服務器
chainWebpack: (config) => {
// ============注入cdn start============
config.plugin('html').tap((args) => {
// 生產環境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
// 修改文件引入自定義路徑
config.resolve.alias
.set('@', resolve('src'))
.set('_api', resolve('src/api'))
},
transpileDependencies: [
/[/\\]node_modules[/\\]test[/\\]/,
/[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
]
}
2.在package.json修改
"dependencies": {
"compression-webpack-plugin": "^3.1.0",
"core-js": "^3.6.4",
"exif-js": "^2.3.0",
"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",
"qs": "^6.9.1"
// cdn 引用的就不要在這里出現了 ?。。? // "axios": "^0.19.2", （要刪除掉 不要注釋掉 要不會報錯哦）
// "vant": "^2.5.2",（要刪除掉 不要注釋掉 要不會報錯哦）
// "vue": "^2.6.11",（要刪除掉 不要注釋掉 要不會報錯哦）
// "vue-router": "^3.1.5",（要刪除掉 不要注釋掉 要不會報錯哦）
//"vuex": "^3.1.2"（要刪除掉 不要注釋掉 要不會報錯哦）
},
3.public下的index.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 解決版本更新緩存問題 -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-store, must-revalidate">
<meta http-equiv="expires" content="0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="icon" href="">
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="stylesheet"
/>
<% } %>
<!-- 使用CDN的CSS文件 -->
<title id="titleHeader"></title>
</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 -->
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
</body>
</html>
4.壓縮文件
（1）安裝插件 (這一步也很重要哦)
cnpm i --save compression-webpack-plugin
（2）在vue.config.js 中使用
具體的使用方法已經在第一部分寫好了 我這是單獨抽出來給你們演示一下
const CompressionPlugin = require("compression-webpack-plugin");
configureWebpack: (config) => {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|.\css/, //匹配文件名
threshold: 10240, //對超過10k的數據壓縮
deleteOriginalAssets: false, //不刪除源文件
minRatio: 0.8,
}),
],
};
},
代碼有點多 但是實現起來的效果還是不錯的 大家可以試一下啊
原文：(https://blog.csdn.net/qq_36529240/article/details/110134535)
