Vue.js 项目打包优化实践

3,808 阅读3分钟

首先上结果:

  1. 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn;
  2. 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载速度。
  3. 添加了全局 loading 来提高体验。

优化前,可以看出包含了不少的runtime包

经过优化体积大幅减小

不出意外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的小站。