前端问答社区

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

Javan 发布于 1年前 分类: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会将模块编译后进行缓存,第一次之后速度会明显提升。

回复

共0条回复 我来回复
  • 暂无回复内容