webpack打包体积,SPA首屏优化(二)
2018-08-03 | 前端优化
写在前面
仅此文章记录本人在学习以及项目中,针对webpack打包js、css体积过大,首屏太慢问题的处理办法。tip:本篇文章基于vue全家桶 + iview + webpack技术栈。
webpack写入配置
module.exports = {
externals: {
vue: 'Vue',
axios: 'axios',
iview: 'iview'
}
}
上面这种配置方法,告诉webpack,输出的时候会采用umd模块化方案(如果你了解过umd的话),所以webpack就会把我们的源码的require部分处理成如下的结果(以vue: 'Vue'为例):
({
0: function(...) {
var Vue = require(1);
/* ... */
},
1: function(...) {
// 很明显这里是把window.vue赋值给了module.exports
// 因此我们便可以使用require来引入了。
var Vue = window.vue;
module.exports = Vue;
},
/* ... */
});
externals: {vue: 'Vue'}这个里面的vue是指require('1')中的Vue。简单翻译一下,就是说“当require的参数是vue的时候,使用Vue这个全局变量引用它”。
到这里我们就配好了webpack。