webpack 使用外部的库_webpack打包体积优化

优化：

1：外部引入模块(cdn)

如 jquery，zepto，d3, bootstrap这些固定的lib 使用cdn直接引用就可以，没有必要打包到build，有效利用302。

2：图标优化

不管后台还是移动端避免不了icon的使用，使用字体图标，还需引入字体文件，如果字体丢失 会影响到icon显示效果，推荐转换base64 后引用。

3：统一模块

如：moment我们可能在多个页面使用  没必要每个页面进行import引入，可以在入口文件(index.js 或main.js)全局配置

例如：

import Vue from 'vue'Vue.prototype.$moment = moment;

以后在每个页面都可以直接使用 this.$moment ,  不在需要每个页面import 'moment' 。

moment 有各种语言包，总大小200k+，如使用webpack打包 建议过滤掉其他语言

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

或new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)

4：分离第三方库

entry: {app: './src/main.js', //设置入口文件vendors: ['vue', 'vue-router', 'moment']},

plugins[

new webpack