Vue.js 项目打包优化实践

2020年02月17日 14:15 · 阅读 2619

首先上结果：

把常用的 Vue，router，vuex，axios 的 runtime 包拆分了出来，改为 cdn；
另外就是对于自己编写的业务代码进行分包，根据路由进行懒加载，可以较好的提高首屏加载速度。
添加了全局 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 的配置项：

webpack.externals
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

参考文章

路由懒加载优化

这里主要是根据官方文档的实践：结合 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的小站。