Vue 打包體積優化方案小結
Vue-cli3 打包體積優化方案
前言:
公司專案完成後 ，打包完成後有1.18MB，其實感覺還行了，但是還可以有優化的地方，對於咱們有精益求精（有沒有還是有點*數的）的精神下再去優化，可以先在專案中安裝webpack-bundle-analyzer可以看到各個檔案的大小
npm install webpack-bundle-analyzer -save-dev
在vue.config.js中進行配置
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}執行npm run build 或者 npm run serve 會出現這花裡胡哨的介面用來分析檔案大小
分析
還沒進行優化前vendor~app.xxxx.js 有1.18MB，咱們可以檢視各個bundle大小，針對性的進行優化
優化
CDN載入
對於vue、vue-router、vuex、axios等都可以在生產環境用CDN載入
const externals = {
'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios'
}
const cdn = {
css: [],js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js','https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js','https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js','https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',]
}
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
},configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,};
}
},}接著修改pubilc/index.html檔案
<!DOCTYPE html>
<html lang="en">
<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.png" rel="external nofollow" >
<!-- 使用CDN的CSS檔案 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<% } %>
<!-- 使用CDN的JS檔案 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
<% } %>
<title>上海比戶</title>
</head>
<body>
<noscript>
<strong></strong>
</noscript>
<div id="app"></div>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>路由懶載入
當打包應用的時候，JavaScript包會變的特別大，影響頁面載入，如果這時我們在訪問路由的時候去載入該模組，那會變的十分高效，把靜態引入方式改為動態引入方式
import ComponentA from '../page/components/ComponentA';
routeList = [
{
path: '/comA',component: ComponentA
},]
//改為
routeList = [
{
path: '/comA',component: () => import('../page/components/ComponentA')
},]
由於我的專案一開始就用了路由懶載入，所以在打包檔案上看不出體積大小的變化，但是大概會有個300k的大小減少
在vue cli3中，我們還需要手動移除prefetch，Preload，因為在vue cli 官方文件上提到，可以去了解下，我這大致概括了下
就是當首屏載入的時候，會一次性下載完所以的路由檔案，這會導致首屏的時候請求內容變多，首屏載入變慢，修改如下
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 外掛
config.plugins.delete('prefetch')
// 移除 preload 外掛
config.plugins.delete('preload');
},configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,}
element-ui 按需載入
看element-ui/lib 這個包就佔了總包大小的三分之二，554k，總包也就700多k，所以如果把element-ui 按需載入，那就可以減少體積，按需載入這就不說了吧，都會~:stuck_out_tongue_closed_eyes:
但是需要在 babel.config.js檔案中新增（vue cli3 中需要安裝 babel-plugin-component）
module.exports = {
presets: ['@vue/app'],//加上這~
plugins: [
[
'component',{
libraryName: 'element-ui',styleLibraryName: 'theme-chalk'
}
]
]
};
gzip
安裝 compression-webpack-plugin
nmp i compression-webpack-plugin -D
在vue.config.js中引入
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 外掛
config.plugins.delete('prefetch')
// 移除 preload 外掛
config.plugins.delete('preload');
},plugins: [
//gzip壓縮
new CompressionPlugin({
test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/,//匹配檔名
threshold: 10240,//對超過10k的資料壓縮
deleteOriginalAssets: false //不刪除原始檔
})
],performance: {
hints: false
}
};
}
},}
可以在上面的圖看到，進行gzip壓縮後的檔案最大的也只有140k了
但是還需要在服務端配置
scss檔案引入
我們通常會把scss檔案抽離出來，一些共用樣式，主題等，然後會在每個需要的元件中引入會顯得繁瑣，我們可以藉助scss-loader進行預處理
例如我們有 resetTable.scss 檔案，可以在vue.config.js中引入
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// 移除 prefetch 外掛
config.plugins.delete('prefetch')
// 移除 preload 外掛
config.plugins.delete('preload');
},performance: {
hints: false
}
};
}
},// scss設定
css: {
loaderOptions: {
sass: {
//我是放在 assets/commcss 目錄下
data: '@import "@assets/commcss/resetTable.scss";'
}
},},}
上面這圖就是完整的vue.config.js配置啦~
總結：
以上就是目前我在專案中優化的點，但肯定還有其他的優化地方，可以相互討論
到此這篇關於Vue 打包體積優化方案小結的文章就介紹到這了,更多相關Vue 打包體積優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！