关于webpcak打包慢的处理方法

1.使用webpcak-bundle-analyzer去对项目进行模块分析,生成一个报告report,根据报告针对性优化,更找出大模块和不需要打包的模块

运行npm run build --report,结果如下,我们找到不要打包的模块删除

 

 2.对于较大的模块,我们可以在webpcak中配置externals,防止某些import的包被打包到bundle中,让import依赖的某些包在bundle运行的时候通过请求外部获取资源,也能加快打包的速度

我们将不要打包的内容在index.html中引入,cdn

<script src="https://lib.baomitu.com/vue.development.js"></script>
<script src="https://cdnjs.cloudflare.com/echart.js"></script>

在webpcak的externals中配置

 module.exports = {
     ...
     externals : {
       vue: 'vue',
       echarts: 'echarts'
     }
     ...
   }

这样的话,依旧可以在组件中通过import使用

import Vue from 'vue'
import echarts from 'eachrts'

3.HardSourceWebpackPlugin会将模块编译后进行缓存，第一次之后速度会明显提升。

4.loader配置的时候,减小范围