webpack的externals优化项目

用webpack打包项目的时候，如果项目体量比较大，往往打出来的包vender.js会很大，导致首屏加载慢，这时候用webpack提供的externals属性，像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件

优化的步骤有两步，以抽离项目中vue和vue-router为例。

第一步：配置externals

这个配置最好在生产环境的时候配置，如果静态资源是cdn引入的话本地开发依赖网络。

//webpack.config.base.js
const webpack = require("webpack");
const path = require("path");
const MODE = 'development'
module.exports = {
    mode: MODE,
    entry: {
        index: path.resolve(__dirname, '../src/main.ts')
    },
    ...
    externals: process.env.NODE_ENV === 'production' ? {
        "vue": "Vue",
        'vue-router': 'VueRouter'
    } : {}
    ...
}

说一下这里的键值对配置，key值vue这个值是import from 'vue'时用的名称，value值是为Vue，这个值是通过script方式引入js库后它的全局变量 ，这时vue库的全局变量是首字母大写的 'Vue'。

第二步：引入静态资源

用externals配置后，因为vender.js里面没有了静态资源文件，所以需要额外引入，可以在index.html引用cdn引入或者本地引入。cdn引入注意引用官方的，不然引用不当会导致线上项目挂了（之前入过坑...）。

//cdn
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>

//本地
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.min.js"></script>

配置完成

如果你是CDN引入的会发现打包出来的vender.js体积会变小，减少的部分就是静态资源的大小。

不过使用externals属性要注意的是，虽然可以优化首屏加载速度，但是由于静态资源分离，也会增加http请求数量。所以如果是小项目，最好就不要用externals属性，因为小项目打包的出来的vender.js体积不大，建议项目体量较大的项目再用比较合适。

之前配置的时候有个小插曲，以为需要将项目中import静态资源的语句全部去掉，有点尴尬，现在想想实在是有点逗，所以如果你在配置过程中碰到类似问题，可以跳过这个坑。