溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue-cli 3配置打包優(yōu)化的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-cli 3配置打包優(yōu)化的示例分析”這篇文章吧。
配置路由懶加載,封裝了異步組件引入的方法,接收一個(gè)地址做參數(shù)
/**
* 返回異步組件
* @tips 請(qǐng)注意頁(yè)面只能掛載在views文件下,非此路徑請(qǐng)勿使用
*/
const AsyncComponentHook = (path: String): Function => (): any => {
// 通過(guò) webpack 的內(nèi)聯(lián)注釋,設(shè)置模塊名
let component = import(/* webpackChunkName: "view-[request]" */ `@/views/${path}.vue`);
component.catch((e) => {
console.error(e);
});
return component;
};配置代碼壓縮
// 安裝
npm install uglifyjs-webpack-plugin
// 在vue.config.js文件中添加配置
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
config.plugins.push(
//生產(chǎn)環(huán)境自動(dòng)刪除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
}
},配置引用別名
設(shè)置插件的按需引入,本文使用的是element-ui，點(diǎn)擊查看詳情
經(jīng)過(guò)一些基礎(chǔ)的配置后,我們來(lái)看下目前打包后的效果。
從下圖可以看到,打包出來(lái)后最大的包有1.33M。然后再看下請(qǐng)求,哇,217個(gè)請(qǐng)求、首頁(yè)下載需要3.2M。
好吧，開(kāi)始折騰
1. 優(yōu)化scss配置文件的引入
我們?cè)诖罱?xiàng)目的過(guò)程中經(jīng)常性的會(huì)將一些scss配置文件抽離出來(lái)，例如主題色等，然后在每個(gè)需要的組件中引入。這樣會(huì)顯得很繁瑣，我們可以借助sass-loader幫我們進(jìn)行預(yù)處理，
這樣我們就不用在每一個(gè)頁(yè)面都進(jìn)行引入樣式，就能直接引用。
例如我們的樣式文件目錄下有一個(gè)theme.scss，我們可以在vue.config.js中作如下處理
// vue.config.js 配置
module.exports = {
css: {
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {
// pass options to sass-loader
sass: {
// 引入全局變量樣式,@使我們?cè)O(shè)置的別名,執(zhí)行src目錄
data: `
@import "@/stylePath/theme.scss";
`
}
},
},
}通過(guò)以上配置,就可以在組件模板中注釋以下代碼
<style lang="scss"> /* @import "@/stylePath/theme.scss"; */ </style>
2. 針對(duì)請(qǐng)求數(shù)進(jìn)行優(yōu)化
我們發(fā)現(xiàn)請(qǐng)求數(shù)增多是因?yàn)槲覀冺?yè)面預(yù)先渲染了其它組件，會(huì)在html頁(yè)面中插入像這樣的東西<link rel="prefetch">，這該怎么優(yōu)化呢？
首先我們先看下vue.config.js的官方文檔，點(diǎn)擊前往。
官方說(shuō)明： 是一種 resource hint，用來(lái)告訴瀏覽器在頁(yè)面加載完成后，利用空閑時(shí)間提前獲取用戶未來(lái)可能會(huì)訪問(wèn)的內(nèi)容。
所以我們添加如下配置
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
}
}3. 公用代碼提取，使用cdn加載
對(duì)于vue, vuex, vue-router，axios等我們可以利用wenpack的externals參數(shù)來(lái)配置，這里我們?cè)O(shè)定只需要在生產(chǎn)環(huán)境中才需要使用:
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
css: [],
js: [
'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
]
}
module.exports = {
chainWebpack: config => {
// 生產(chǎn)環(huán)境配置
if (isProduction) {
// 生產(chǎn)環(huán)境注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: config => {
if (isProduction) {
// 用cdn方式引入
config.externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
}
},
}接著修改html文件，添加注入代碼
<!DOCTYPE html>
<html lang="zh">
<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">
<!-- 使用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">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>然后打包重啟，我們?cè)賮?lái)看下目前的變化。
嗯，真香~從下圖可以看到,打包出來(lái)后最大的包文件只有775kb。然后再看下請(qǐng)求,哇,43個(gè)請(qǐng)求、首頁(yè)下載只需要1.4M。
可以看出，我們這一系列的操作后請(qǐng)求數(shù)減少了174個(gè)，首頁(yè)渲染減少了1.8m,真是可喜可賀
最后，附上完整的vue-config.js文件
const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
css: [],
js: [
'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
]
}
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 基本路徑
baseUrl: './',
// 輸出文件目錄
outputDir: 'dist',
// 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
// assetsDir: "./",
// 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
indexPath: './',
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
config
.entry('index')
.add('babel-polyfill')
.end();
// 配置別名
config.resolve.alias
.set("@", resolve("src"))
.set("@img", resolve("src/assets/images"))
.set("@css", resolve("src/assets/styles/css"))
.set("@scss", resolve("src/assets/styles/scss"));
// 生產(chǎn)環(huán)境配置
if (isProduction) {
// 刪除預(yù)加載
config.plugins.delete('preload');
config.plugins.delete('prefetch');
// 壓縮代碼
config.optimization.minimize(true);
// 分割代碼
config.optimization.splitChunks({
chunks: 'all'
})
// 生產(chǎn)環(huán)境注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: config => {
if (isProduction) {
// 用cdn方式引入
config.externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
// 為生產(chǎn)環(huán)境修改配置...
config.plugins.push(
//生產(chǎn)環(huán)境自動(dòng)刪除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
} else {
// 為開(kāi)發(fā)環(huán)境修改配置...
}
},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: false,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開(kāi)啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {
// pass options to sass-loader
sass: {
// 引入全局變量樣式
data: `
@import "@/stylePath/theme.scss;
`
}
},
// 啟用 CSS modules for all css / pre-processor files.
modules: false,
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
devServer: {
port: 8888, // 端口
open: true, // 自動(dòng)開(kāi)啟瀏覽器
compress: false, // 開(kāi)啟壓縮
overlay: {
warnings: true,
errors: true
}
},
}以上是“vue-cli 3配置打包優(yōu)化的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼