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的小站。