vue-cli中修改webpack打包策略，某个第三方库单独打包怎么实现 webpack打包的时候，怎么分别打包第三方库，公用组件和业...
vue-cli\u4e2d\u4fee\u6539webpack\u6253\u5305\u7b56\u7565\uff0c\u67d0\u4e2a\u7b2c\u4e09\u65b9\u5e93\u5355\u72ec\u6253\u5305\u600e\u4e48\u5b9e\u73b0\u786e\u5b9e\uff0c\u6bcf\u6b21\u6253\u5305\u4ece\u5165\u53e3\u5f00\u59cb\uff0c\u4f1aparse\u6240\u6709\u7684\u4f9d\u8d56\uff0c\u591a\u7684\u65f6\u5019\u7adf\u7136\u6253\u5305\u4e00\u6b21\u89812\u79d2\u591a\uff0c\u7b80\u76f4\u4e0d\u80fd\u5fcd\u3002\u7136\u800c\uff0c\u6709\u51e0\u4e2a\u89e3\u51b3\u65b9\u6848\uff0c\u6700\u6709\u6548\u7684\uff0c\u662f\u4f7f\u7528weboack
\u7684watch\uff0c\u53ea\u6709\u6587\u4ef6md5\u53d8\u5316\u65f6\uff0c\u624d\u4f1a\u91cd\u65b0\u6253\u5305\uff0c\u5e76\u4e14\u53eaparse\u6709\u53d8\u5316\u7684\u6587\u4ef6\uff0c\u5176\u4ed6\u6ca1\u53d8\u5316\u7684\u6587\u4ef6\u662f\u4f7f\u7528\u7f13\u5b58\u7684\u3002\u8fd9\u6837\u5b50\uff0c\u6253\u5305\u65f6\u95f4\u8fc5\u901f\u964d\u5230200ms
\u4ee5\u5185\u3002
\u518d\u4f18\u5316\u4e0b\u53bb\u7684\u8bdd\uff0c\u6211\u4eec\u8981\u77e5\u9053webpack\u6253\u5305\u7684\u8fc7\u7a0b\u4e2d\u505a\u4e86\u5565\uff0c\u9996\u5148\u662f\u89e3\u6790\u4f9d\u8d56\u5566\uff0c\u7136\u540e\u5c31\u662f\u5404\u79cd\u5404\u6837\u7684loader\u3002\u4ece\u89e3\u6790\u4f9d\u8d56\u7684\u89d2\u5ea6\u5165\u624b\uff0c\u6211\u4eec\u53ef\u4ee5bower install\u4e00\u4e9b\u6253\u5305\u597d\u7684\u6587\u4ef6\uff0c\u7136\u540e\u901a\u8fc7\u8bbe\u7f6e\u522b\u540d\u8ba9\u4f9d\u8d56\u6307\u5411\u8fd9\u4e2a\u6587\u4ef6\uff0c\u8fd9\u6837\u5c31\u51cf\u53bb\u4e86\u7b2c\u4e09\u65b9\u5e93\u7684\u4f9d\u8d56\u89e3\u6790\u65f6\u95f4\u3002
\u7136\u540e\u5404\u79cd\u5404\u6837\u7684loader\u4e5f\u662f\u5f88\u8017\u65f6\u7684\uff0c\u4e00\u79cd\u529e\u6cd5\u662f\u5728loader\u91cc\u9762\u914dinclude\uff0c\u8ba9loader\u53ea\u9488\u5bf9\u7279\u6b8a\u8d44\u6e90\u3002\u53e6\u4e00\u79cd\u529e\u6cd5\u662f\u8ba9\u4f60\u7684\u7b2c\u4e09\u65b9\u5e93noparse\uff0c\u5177\u4f53\u600e\u4e48\u8bbe\u7f6e\u4f60\u67e5\u6587\u6863\u5427\u3002
\u786e\u5b9e\uff0c\u6bcf\u6b21\u6253\u5305\u4ece\u5165\u53e3\u5f00\u59cb\uff0c\u4f1aparse\u6240\u6709\u7684\u4f9d\u8d56\uff0c\u591a\u7684\u65f6\u5019\u7adf\u7136\u6253\u5305\u4e00\u6b21\u89812\u79d2\u591a\uff0c\u7b80\u76f4\u4e0d\u80fd\u5fcd\u3002\u7136\u800c\uff0c\u6709\u51e0\u4e2a\u89e3\u51b3\u65b9\u6848\uff0c\u6700\u6709\u6548\u7684\uff0c\u662f\u4f7f\u7528weboack
\u7684watch\uff0c\u53ea\u6709\u6587\u4ef6md5\u53d8\u5316\u65f6\uff0c\u624d\u4f1a\u91cd\u65b0\u6253\u5305\uff0c\u5e76\u4e14\u53eaparse\u6709\u53d8\u5316\u7684\u6587\u4ef6\uff0c\u5176\u4ed6\u6ca1\u53d8\u5316\u7684\u6587\u4ef6\u662f\u4f7f\u7528\u7f13\u5b58\u7684\u3002\u8fd9\u6837\u5b50\uff0c\u6253\u5305\u65f6\u95f4\u8fc5\u901f\u964d\u5230200ms
\u4ee5\u5185\u3002
\u518d\u4f18\u5316\u4e0b\u53bb\u7684\u8bdd\uff0c\u6211\u4eec\u8981\u77e5\u9053webpack\u6253\u5305\u7684\u8fc7\u7a0b\u4e2d\u505a\u4e86\u5565\uff0c\u9996\u5148\u662f\u89e3\u6790\u4f9d\u8d56\u5566\uff0c\u7136\u540e\u5c31\u662f\u5404\u79cd\u5404\u6837\u7684loader\u3002\u4ece\u89e3\u6790\u4f9d\u8d56\u7684\u89d2\u5ea6\u5165\u624b\uff0c\u6211\u4eec\u53ef\u4ee5bower install\u4e00\u4e9b\u6253\u5305\u597d\u7684\u6587\u4ef6\uff0c\u7136\u540e\u901a\u8fc7\u8bbe\u7f6e\u522b\u540d\u8ba9\u4f9d\u8d56\u6307\u5411\u8fd9\u4e2a\u6587\u4ef6\uff0c\u8fd9\u6837\u5c31\u51cf\u53bb\u4e86\u7b2c\u4e09\u65b9\u5e93\u7684\u4f9d\u8d56\u89e3\u6790\u65f6\u95f4\u3002
\u7136\u540e\u5404\u79cd\u5404\u6837\u7684loader\u4e5f\u662f\u5f88\u8017\u65f6\u7684\uff0c\u4e00\u79cd\u529e\u6cd5\u662f\u5728loader\u91cc\u9762\u914dinclude\uff0c\u8ba9loader\u53ea\u9488\u5bf9\u7279\u6b8a\u8d44\u6e90\u3002\u53e6\u4e00\u79cd\u529e\u6cd5\u662f\u8ba9\u4f60\u7684\u7b2c\u4e09\u65b9\u5e93noparse\uff0c\u5177\u4f53\u600e\u4e48\u8bbe\u7f6e\u4f60\u67e5\u6587\u6863\u5427\u3002
的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。这样子，打包时间迅速降到200ms
以内。
再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。从解析依赖的角度入手，我们可以bower install一些打包好的文件，然后通过设置别名让依赖指向这个文件，这样就减去了第三方库的依赖解析时间。
然后各种各样的loader也是很耗时的，一种办法是在loader里面配include，让loader只针对特殊资源。另一种办法是让你的第三方库noparse，具体怎么设置你查文档吧。
比如，我想单独打包echarts，我做出以下尝试：
得到的结果是：
显然，echarts不只1K，所以这么做是不对的，但我不知道怎么做才是正确的。
为了跟上面的尝试做对比，我把我做的地方注释掉，如下图：
得到的结果：
app.XXX.js的大小竟然变了，是在搞不懂是哪出了问题。
我应该怎样才能配置使之单独将echarts模块单独打包呢？
绛旓細1.vue-cli: https://github.com/vuejs/vue-cli 鑴氭墜鏋跺伐鍏,褰撴垜浠夋嫨vue浣滀负鎴戜滑鐨勫紑鍙戞妧鏈爤浠ュ悗,灏辫寮濮嬩负鎴戜滑鐨勯」鐩惌寤虹洰褰曞強寮鍙戠殑鐜銆傚畨瑁呭ソnode浠ュ悗,閫氳繃浠ュ悗鍛戒护杩涜瀹夎 npm install -g vue-cli 灏唙ue-cli瀹夎鍒板叏灞鐜 vue init webpack my-vue-demo 鍒涘缓鍩轰簬webpack妯℃澘鐨勫悕涓簃y-vue-demo鏂囦欢...
