写在前面

仅此文章记录本人在学习以及项目中，针对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。