L Z A

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。