原文：webpack 打包 vue 速度太慢怎么办？ - 每天一个JavaScript小知识@Js中文网 · 码农进阶题库

原文地址：https://www.javascriptc.com/interview-tips/zh_cn/javascript/webpack-vue-slow/

题目描述：

webpack 打包 vue 速度太慢怎么办？

解题：

  • 思路一：

不用vue！！！！

哈哈，这当然是开玩笑的啦

  • 思路二：

1.使用webpack-bundle-analyzer对项目进行模块分析生成report，查看report后看看哪些模块体积过大，然后针对性优化，比如我项目中引用了常用的UI库element-ui和v-charts等

2.配置webpack的externals ，官方文档的解释：防止将某些import的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。 所以，可以将体积大的库分离出来：

// ...
externals: {
    'element-ui': 'Element',
    'v-charts': 'VCharts'
}

3.然后在main.js中移除相关库的import

4.在index.html模板文件中，添加相关库的cdn引用，如：

<script src="https://unpkg.com/element-ui@2.10.0/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
  • 思路三：

“打包慢”，是一个综合的因素，和vue关系不大。

1：确保下webpack，npm, node 及主要库版本要新，比如：4.x比3.x提升很多。

2：loader范围缩小到src项目文件！一些不必要的loader能关就关了吧

3：eslint代码校验其实是一个很费时间的一个步奏。 ：可以把eslint的范围缩小到src,且只检查*.js 和 *.vue ：生产环境不开启lint，使用pre-commit或者husky在提交前校验

4：happypack多进程进行

如果上面优化后，时间还是不满意的话，就尝试下5,6吧。

5：动态链接库（DllPlugin），楼上已说。有点类似配置的externals。 补充一下： 缺点：将不能按需加载，会将配置的第三方库全部打包进去。 推荐：可以将使用率较高的包采用dll方案。

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

扩展阅读：