Webpack 生产环境性能优化之externals

前言

在实际开发中，我们可能会引入一些第三方库，比如说 elementUI。但是在项目打包的时候，webpack会将main.js 中引入的第三方代码进行打包，为了减小js代码的体积，我们又不希望把它打包进我们的项目中，那么我们应该怎么去做呢？webpack 为我们提供了一个叫做 externals 的配置项，这个配置项可以指定我们想要忽略的第三方库，在打包的时候就不会把这些第三方库打包进来。

如果使用了 elementUI 但是又没打包进来，那如何获取这些代码呢？

其实我们可以在 html 模版中使用 script 标签的方式，使用 cdn 的链接引入 elementUI ，这样相当于做了代码分割，而且使用现成的 cdn 链接，会让加载速度更快！

通过externals 这样就可以不把在main.js中，Vue.use(elemntui) 等引入打包的js当中了。

module.exports = {
	publicPath:'./'
    entry: ...
    externals: {
        // [npm 包名]：库名
        'vue': 'Vue',
        'vue-router': 'VueRouter'
        'element-ui': 'ELEMNT'
        'vuex': 'Vuex',
        'axios': 'axios'
    }
}

结语

使用 externals 配置可以有效地将第三方库分离出来，结合cdn可以让我们的页面加载速度得到有效的提高！