vue-cli3学习第六节之超级简单的优化打包后的体积以及首页加载

推荐一首歌：「Swallowtail Butterfly ～あいのうた～」from 消滅都市 (TV size) -------- 花澤香菜

写这篇的时候其实我项目还没写完，不过突然想写了，就先写着吧。

先给项目打个包，200kb的总体积，相对很多项目已经很小了，但是既然还有更小的方法，为什么不用呢？

如何来用？

首先，项目中很多框架比如vue，vue-router，polyfill，axios，vuex等都会在打包时被打入，从而增大了打包后的体积。从资源加载的角度来看，比如页面能同时加载10个50kb左右的资源保证正常速度，加载时间为50ms，但是加载1个200kb的资源也是正常速度，加载时间为200ms，这就显示出差距了。所以将大资源切分成多个小资源就是必要的了，当然，也不是切分成越多越好，同时加载的个数浏览器处理也是有限度的。

如何切分成多个？可以通过外链引入框架，打包的只有我们自己的代码和一些小框架中的按需引入。

此处本人项目使用了：vue，vue-router，polyfill，axios，vuex，vant。

由于vant是按需加载的，不考虑切分，其他框架都是全部引入的，所以我们配置在打包正式或者测试环境的时候不打包进去，开发环境还是直接引入本地资源即可，不用考虑切分。

说到配置，就是webpack的配置了，首先在vue.config.js，找到webpack配置：

// src/vue.config.js

const cdn = {
    css: [],
    js: [
        'https://xxx.com/cssjs/Cookies/js.cookie.js',
        'https://xxx.com/cssjs/polyfill.min.js',
        'https://xxx.com/cssjs/vue-2.5.17-min.js',
        'https://xxx.com/cssjs/vue-router-3.0.1-min.js',
        'https://xxx.com/cssjs/axios-0.18.0-min.js',
        'https://xxx.com/cssjs/vuex-3.0.1-min.js',
    ]
}

module.exports = {
    // webpack配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production" || "test") {
            // 配置不打包参数
            // externals的key是后面需要require的名字，value是第三方库暴露出来的方法名
            // 已知："element-ui": "Element", "qs": "Qs", "mint-ui": "MINT","vue-aplayer":"VueAPlayer"
            // 其他的还需少年努力找哈
            config.externals = {
                "vue": "Vue",
                "vue-router": "VueRouter",
                "vuex": "Vuex",
                "axios": "axios",
                "babel-polyfill": "window"
            }
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === "production" || "test") {
            config.plugin("html").tap(options => {
                options[0].cdn = cdn;
                return options;
            })
        }
    }
    
}

配置終わり，那么只需要引入下即可，在哪引入？在public/index.html中：

  
    
    
    
    
    
    
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    
    
    <% } %>
    
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>
  
  
    
    

    
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>
  

好了，配置和引入都完成了，那么开始打包，npm run build , 打开一看，原来200kb的包变成了50kb的，不过多了其他插件的cdn引入加载，