Vue專案優化打包之前端必備加分項
目錄
- 前言
- 一、路由懶載入
- 1. 為什麼需要路由懶載入
- 2. 如何實現路由懶載入
- 3. 路由懶載入中的魔法註釋
- 二、分析包大小
- 1. 需求
- 2. 如何生成打包分析檔案
- 三、webpack配置排除打包
- 1. 需求
- 2. 排除打包
- 四、 引用網路資源
- 1. 需求
- 2. CDN
- 3. 實現步驟
- 五、 打包去除console.log
- 1. 需求
- 2. 程式碼演示
- 總結
前言
專案開發完畢後，對專案進行打包釋出之前，必不可少的操作就是專案優化，這也是程式猿的加分項。跟隨本文的腳步來看看如何對專案進行優化吧~
一、路由懶載入
1. 為什麼需要路由懶載入
當剛執行專案的時候，發現剛進入頁面，就將所有的檔案和檔案載入了進來，這一程序十分的消耗時間。
2. 如何實現路由懶載入
vue官方文件：路由懶載入
程式碼如下（示例）:
{http://www.cppcns.com
path: '/login',component: () => import('@/views/login/index'),hidden: true
},
3. 路由懶載入中的魔法註釋
通過在註釋中指定webpackChunkName，可以自定義這個檔案的名字。
程式碼如下（示例）:
components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
二、分析包大小
1. 需求
想要知道打包生成的檔案中，每個檔案所佔的空間大小。以便於我們分析，對程式碼進行優化處理。
2. 如何生成打包分析檔案
終端中執行 npm run preview -- --report,這個命令會從我們的入口main.js進行依賴分析，分析出各個包的大小。最終會在生成的dist資料夾下生成一個report.html的檔案，開啟後就可以看到我們在專案使用檔案佔據的空間大小啦~
(效果圖如下：)
三、webpack配置排除打包
1. 需求
將一些不常用的包，排除在生成的打包檔案以外。
例如：上圖所示的xsxl.js 、 element.js，可以將其排除在打包生成的檔案以外
2. 排除打包
找到 vue.config.js， 新增 externals 項，具體如下：
程式碼如下（示例）：
configureWebpack: {
// 配置單頁應用程式的頁面的標題
name: name,externals: {
/**
* externals 物件屬性解析。
* 基本格式：
* '包名' : '在專案中引入的名字'
*
*/
'vue': 'Vue','element-ui': 'ElementUI','xlsx': 'XLSX'
},resolve: {
alias: {
'@': resolve('src')
}
}
}
四、 引用網路資源
1. 需求
我們進行了上一步操作以後，打包生成後的包小了很多。但是呢，沒有這些依賴包的話，專案上線是沒有辦法執行的。那麼就需要引用網路中的資源，來支援我們程式碼的執行。
2. CDN
- CDN全稱叫做“Content Delivery Network”，中文叫內容分發網路。我們用它來提高訪問速度
- 把一些靜態資源：css， .js，圖片，視訊放在第三方的CDN伺服器上，可以加速訪問速度。
好處：
- 減少應用打包出來的包體積
- 加快靜態資源的訪問
- 利用瀏覽器快取，不會變動的檔案長期快取
3. 實現步驟
注意:在開發環境時，檔案資源還是可以從本地node_modules中取出，而只有專案上線了，才需要去使用外部資源。此時我們可以使用環境變數來進行區分。具體如下：
程式碼如下（示例）：
在vue.config.js檔案中:
let externals = {}
let cdn = { css: [],js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判斷是否是生產環境
if (isProduction) {
externals = {
/**
* externals 物件屬性解析：
* '包名' : '在專案中引入的名字'
*/
'vue': 'Vue','element-ui': 'ELEMENT','xlsx': 'XLSX'
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 樣式表
],js: [
// vue must at first!
'https://unpkg.com/[email protected]/dist/vue.js',// vuejs
'https://unpkg.com/element-ui/lib/index.js',// element-ui js
'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js',// xlsx
]
}
}
webpack配置externals配置項
configureWebpack: {
// 配置單頁應用程式的頁面的標題
name: name,externals: externals,resolve: {
alias: {
'@': resolve('src')
}
}
}
通過 html-webpack-plugin注入到 index.html之中:
在vue.config.js檔案中配置:
chainWebpack(config) {
config.plugin('preload').tap(() => [
{
rel: 'preload',fileBlacklist: [/\.map$/,/hot-update\.js$/,/runtime\..*\.js$/],include: 'initial'
}
])
// 注入cdn變數 (打包時會執行)
config.plugin('html').tap(args => {
args[0].cdn = cdn // 配置cdn給外掛
return args
})
// 省略其他...
}
找到 public/index.html 通過配置CDN Config 依次注入 css 和 js。
修改head的內容如下:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!-- 引入樣式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<www.cppcns.com% } %>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
</head>
五、 打包去除console.log
1. 需求
在專案打包上線後，去除掉程式碼中所有的console.log
2. 程式碼演示
在vue.config.js檔案中www.cppcns.com配置：
程式碼如下（示例）：
chainWebpack(config) {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
總結
到此這篇關於Vue專案優化打包之前端必備加分項的文章就介紹到這了,更多相關Vue專案優化打包內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！