Vue.js 項目打包優化實踐

首先上結果：

1. 把經常使用的 Vue，router，vuex，axios 的 runtime 包拆分了出來，改成 cdn；
2. 另外就是對於本身編寫的業務代碼進行分包，根據路由進行懶加載，能夠較好的提升首屏加載速度。
3. 添加了全局 loading 來提升體驗。

不出意外core-js也能夠改爲CDN

配合靜態資源的CDN加速，目前首頁的速度大概是700ms，除了圖片外加載的速度大概是200ms左右

測試連接

CDN 優化

CDN 優化是在 webpack 中實現的，主要分爲環境切換，webpack 打包技巧和 html-webpack-plugin配置三個部分。

這部分的代碼能夠點擊這個連接

環境切換

經過process.env.NODE_ENV來切換環境，由於在 dev 環境的時候，最好仍是使用本地包，方便 debug 等，在生產環境的時候才須要添加 CDN.

本項目的vue.config.js中就是這樣安排的，這樣就能夠在不一樣環境對 webpack 進行配置，相似於vue-cli2的配置類型：

# cli 2
webpack.dev.js
webpack.prod.js
複製代碼

本項目中;

if (process.env.NODE_ENV === 'production') {
	webpackConfig['chainWebpack'] = config => {
		config.plugin('html').tap(args => {
			args[0].cdn = cdn;
			return args;
		});
	};
	webpackConfig['configureWebpack'] = config => {
		config['externals'] = {
			vue: 'Vue',
			vuex: 'Vuex',
			'vue-router': 'VueRouter',
			axios: 'axios',
		};
		config['plugins'].push(new BundleAnalyzerPlugin());
	};
}

module.exports = webpackConfig;
複製代碼

具體操做涉及vue/cli3+的配置，具體能夠看這裏; 對於configureWebpack， 有配置式和函數式，當使用函數式的時候，添加插件的方法能夠看上面的片斷，這是官方文檔裏面沒有的。

打包技巧

那麼該怎麼設置 cdn 呢？

這裏須要兩個 webpack 的配置項：

1. webpack.externals
2. webpack.plugins.html-webpack-plugin 具體也能夠看代碼，主要的思路就是在區分環境的基礎上，在生產環境將須要 cdn 的包放在webpack.externals裏面：

webpackConfig['configureWebpack'] = config => {
	config['externals'] = {
		vue: 'Vue',
		vuex: 'Vuex',
		'vue-router': 'VueRouter',
		axios: 'axios',
	};
};
複製代碼

接着就是操做 plugin，這裏選擇鏈式操做，將須要填入的 cdn 鏈接的內容傳給index.html模板：

let cdn = {
	js: [
		// 能夠寫成動態版本號
		'//cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
		'//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
		'//cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
		'//cdn.bootcss.com/axios/0.19.0/axios.min.js',
	],
};
webpackConfig['chainWebpack'] = config => {
	config.plugin('html').tap(args => {
		args[0].cdn = cdn;
		return args;
	});
};
複製代碼

html-plugin 配置

上述的配置完成以後，須要在public/inedx.html中修改一下：

<div id="app"></div>
<% if(process.env.NODE_ENV==='production'){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %>
<script type="text/javascript" src="<%= item %>"></script>
<% }})} %>
<!-- built files will be auto injected -->
複製代碼

這個的目的就是當是生產環境的時候，遍歷生成 CDN 的元素。這是一個模板語法，能夠看看html-webpack-plugin

參考文章

1. webpack 使用 HtmlWebpackPlugin 進行 cdn 配置
2. vue 打包優化
3. 在 vue-cli 3.0 中根據不一樣環境動態注入 CDN
4. webpack-cdn-plugin
5. webpack4 配置的最佳實踐

路由懶加載優化

這裏主要是根據官方文檔的實踐： 結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

// src/router/index.js
// 路由懶加載 博客分塊
const Blog = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/Blog.vue');
const ContentPage = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/ContentPage.vue');
複製代碼

loading 插件

爲了美化加載的過程，自定義一個Loading插件，主要參考了這些文章

選擇了一個蠻炫酷的動效

功能：

• 單例模式
• 能夠在axios攔截器中使用

寫在最後

但願你們能夠多多關注個人abandon.work，一個nest.js+mongoDB+Vue.js的小站。